Algo más sobre pipes

En el artículo anterior empezamos a conocer los pipes, en una breve introducción. Este es un tema inherentemente amplio. La colección de pipes que incluye Angular es suficiente para la mayoría de necesidades de presentación de datos. Y eso sin contar con los pipes que hay de terceros, o los que podamos crear nosotros mismos.

En este artículo vamos a conocer algunos pipes más de Angular, ampliando el componente que usamos en el artículo anterior. Por supuesto, no podremos cubrir todos los que hay, ni explorar detalladamente todas sus opciones. Sólo con los pipes, necesitaríamos escribir un libro (y no sería pequeño). Pero conoceremos algunos de los más empleados, y nos familiarizaremos más con el tema.

No obstante, en adelante, en este curso, iremos introduciendo nuevos pipes, según los vayamos necesitando. Así, cuando necesites usar alguno en tus propios proyectos, tendrás donde documentarte.

RECORTE DE DATOS

El pipe slice permite mostrar un fragmento a partir de un valor literal. Recibe dos parámetros. El primero es obligatorio, e indica desde que carácter se inicia el recorte. El segundo es opcional, e indica cual será el primer carácter que no se mostrara. Vamos a explicarnos. Los caracteres de una cadena de texto se empiezan a contar desde 0, como los índices de una matriz. Si decimos que queremos recortar desde el carácter 2 nos estamos refiriendo al tercer carácter. Si decimos que queremos recortar hasta el carácter 9 estamos diciendo que el carácter 9 (el décimo de la cadena) es el primero que no se mostrará. Suponte que, sobre el ejercicio del artículo anterior, ponemos, en pipes-checking.component.html lo siguiente:

Lo que obtenemos en pantalla es lo siguiente:

Recorte de cadena:
Valor original: Esto es un literal.
Valor recortado: to es u

Contemos los caracteres de la cadena:

Como ves, el carácter 2 es la t de la palabra Esto, y es el primero que se muestra. El carácter 9 es la n de la palabar un, y es el primero que ya no se muestra.

El segundo parámetro es opcional. Si no se pone, se mostrará hasta el final de la cadena. Además, el segundo parámetro puede ser un valor negativo. Observa el siguiente ejemplo:

El resultado en la vista es el siguiente:

Recorte de cadena:
Valor original: Esto es un literal.
Valor recortado: to es un li

Si el segundo parámetro es negativo, el final del recorte se cuenta desde el final de la cadena. Es decir, en el recorte, por detrás, faltarán tantos caracteres como indique este parámetro.

ACERCA DE FECHAS

Las fechas son otro tipo de dato cuya presentación en la vista puede gestionarse mediante pipes. Vamos a incluir una fecha en la lógica de nuestro componente (pipes-checking.component.ts), así:

Como sabes, esto nos devuelve el número de milisegundos trancurridos desde la hora cero de la era Unix, es decir, las cero horas del día 1 de Enero de 1970. Evidentemente, este es un dato que no puede mostrarse así directamente en la vista. Vamos a usar el pipe date en pipes-checking.component.html para visualizarlo de un modo más o menos legible:

Lo que esto nos muestra en la vista es lo siguiente:

Tratamiento de fecha:
Valor original: 1526635786393
Con el pipe date sin parámetros: May 18, 2018

Como ves, el valor tomado directamente es una ristra de dígitos, completamente ininterpretable. Sin embargo, el uso del pipe así, sin más, ya mejora bastante la cosa. Pero aún podemos mejorarla más, con el uso de ciertos parámetros. De hecho, este pipe admite hasta tres parámetros, aunque, en cuanto a opciones (sobre todo en el primero), no se queda corto. Son los siguientes:

  • Formato. Nos da una gran cantidad de opciones, respecto al formato en que queremos obtener la fecha, si queremos incluir la hora, etc. Puedes ver todos los formatos disponibles en https://angular.io/api/common/DatePipe.
  • Zona horaria. Nos permite establecer la zona horaria con respecto al meridiano cero. En España, por ejemplo, el huso horario incrementa una hora respecto al meridiano cero. Es algo curioso porque, geográficamente, el meridiano cero pasa por España y, hasta 1940, tuvimos la hora del meridiano cero. Fué el gobierno de la época el que decidió hacer este cambio, que aún permanece en nuestros días. Anécdotas históricas aparte, lo cierto es que nuestro huso horario actual es UTC + 1 (se conoce como UTC o, también, GMT, la hora del meridiano cero). En el horario de verano, el huso horario español es UTC + 2.
  • Notación local. Al igual que los números, por defecto Angular muestra las fechas y horas en notación anglosajona. Podemos ponerlo en notación española, pero no olvides que tienes que importar esa notación en tu aplicación, como vimos en el artículo anterior.

Veamos algunos ejemplos de uso:

En la renderización de la vista obtenemos lo siguiente:

Tratamiento de fecha:
Valor original: 1526637329774
Con el pipe date sin parámetros: May 18, 2018
Con un ejemplo del parámetro de formato: Friday, May 18, 2018 at 11:55:29 AM GMT+02:00
Añadiendo la zona horaria española: Friday, May 18, 2018 at 10:55:29 AM GMT+01:00
Con notación española: viernes, 18 de mayo de 2018, 10:55:29 (GMT+01:00)

Si, por ejemplo, queremos poner el tercer parámetro, pero no alterar el segundo, podemos usar lo que ves a continuación:

{{ fecha|date :'full' :undefined :'es' }}

Como ves, para poner el tercer parámetro estamos, evidentemente, obligados a poner el segundo pero, si no queremos especificarlo, undefined nos lo soluciona.

CONCLUYENDO

En este artículo hemos aprendido a usar otros dos pipes muy habituales. Puedes descargarte la aplicación, en su estado actual, en este enlace, por si tienes alguna duda con el código.

   

Deja un comentario