Introducción a los pipes

Seguimos con nuestra línea de ir introduciendo lo básico de algunos conceptos fundamentales de Angular 5. Todos estos conceptos los usaremos (y ampliaremos) en secciones posteriores del curso.

En este caso vamos a hablar de los pipes, también llamados tuberías. Se trata de elementos que permiten modificar la apariencia de un texto, literal, numérico, de fecha, etc, ajustándolo a un formato concreto.

En Angular 5 existen bastantes pipes. Además, en Internet se encuentran pipes desarrollados por terceros, que podemos incorporar a nuestra aplicación si los necesitamos. Por último, si necesitas algo muy específico, puedes desarrollar tu propio pipe.

Para probar los pipes vamos a crear un nuevo módulo en nuestra aplicación, para aprovechar toda la estructura básica que ya tenemos.

PREPARANDO EL ESCENARIO

Lo que vamos a hacer es crear un módulo en el que crearemos un componente para ver como usar algunos de los pipes más habituales que vienen incorporados con Angular. Lo haremos así:

ng g m pipes-using
ng g c pipes-using/pipes-checking --export

A continuación, tenemos que crear un enrutamiento, en app-routing.module.ts para acceder al componente que acabamos de crear. Observa el código:

Y, desde luego, tenemos que crear un enlace en alguna parte para acceder. Dada la estructura que tenemos, lo crearemos en la barra de navegación, en navbar.component.html:

Observa, en las líneas resaltadas, como lo hemos hecho. Todo esto, hasta aquí, no tiene nada nuevo.

OBTENER Y MOSTRAR DATOS

Ahora vamos a preparar el componente para ver que son los pipes y cómo actúan. Empezaremos por declarar algunos datos en la lógica (pipes-checking.component.ts), así:

Observa las líneas resaltadas. Como ves, hemos declarado algunos datos dentro de la clase, como de acceso público, para que sean accesibles desde la vista. Ahora veamos el archivo pipes-checking.component.html:

LO QUE SUCEDE

Vamos a analizar lo que está sucediendo aquí, paso a paso.

LITERALES

Empezamos jugando con el literal. Vemos que lo mostramos tal como viene de la lógica, y luego volvemos a mostrarlo con el pipe uppercase. Los pipes se enlazan con los datos sobre los que tienen que actuar mediante el signo |. Este pipe, en concreto, lo que hace es mostrar el literal con todas las letras en mayúsculas.

A continuación volvemos a mostrar la cadena original. Esto lo hacemos para que veas que el pipe sólo modifica la forma en que se muestran los datos, pero no actúa sobre estos. Lo siguiente que vemos es como usar el pipe lowercase, que muestra la cadena con todos los datos en minúsculas.

NUMÉRICOS

Ahora vamos a ver un par de pipes concebidos para trabajar con datos numéricos. Como ves, tenemos, como valor original 25895.396. Es un valor con una parte entera y otra fraccionaria. En Angular usamos el llmado Decimal Pipe, que se invoca con number, para formatear números. Este pipe recibe un argumento, entrcomillado y seprado del nombre del pipe con el signo :, para indicar el mínimo de cifras de la parte entera, y el mínimo y máximo de cifras de la parte decimal.

En este caso, le estamos diciendo que queremos, al menos, tres cifras enteras (observa la sintaxis). Si la parte entera tuviera menos de tres cifras, se rellenaría con ceros por la izquierda. También le decimos que el mínimo de cifras de la parte fraccionaria será dos, y también el máximo. Es decir, que queremos la parte fraccionaria con dos cifras, sí o sí. Observa como nos formatea el número tal como le hemos indicado. Sin embargo, fíjate en que los millares, en la parte entera, se separan con una coma, mientras que la parte fraccionaria se separa con un punto. Esto es porque, por defecto, Angular usa la notación anglosajona. En español separamos los millares con un punto, y la parte fraccionaria con una coma. Este pipe admite un segundo parámetro para cambiar eso, pero, para usarlo, necesitamos conocer antes algunas cosas. Hablaremos de ello en este mismo artículo, un poco más adelante.

Otro pipe muy empleado para formatear valores numéricos es el que los presenta como monetarios. Se llama Currency y se invoca con currency, como ves aquí:

El primer parámetro se refiere a la moneda en que se expresa el valor. Puede ser EUR, USD, etc. El segundo parámetro es un true, si queremos que aparezca el signo de la moneda elegida. Una vez más, observarás, cuando lo pruebes, que la notación es, por defecto, anglosajona, es decir, con el signo de la moneda delante del valor, y con los millares separados por comas, y la parte fraccionaria por un punto. También aprenderemos, en este artículo, a cambiar eso.

DATOS COMPLEJOS

Para terminar este ejemplo, veamos que ocurre con una matriz JSON. Por defecto, si intentamos mostrar la matriz por las buenas, sólo vemos que contiene datos de tipo object, pero no vemos el contenido de dichos datos. El pipe json serializa todo el objeto JSON, de modo que sea legible por humanos (vale, no queda muy bonito, pero legible sí es, que es de lo que se trata).

LA NOTACIÓN EN ESPAÑOL

Hemos comentado que existe un problema con los pipes que tratan con números, en cuanto a que los formatea en notación anglosajona. Si deseamos que los formatee conforme a la notación hispana, tenemos que tocar algunas cosas. Para empezar, que sepas que Angular viene con la posibilidad de trabajar con notaciones de una gran cantidad de idiomas. El idioma con el que estamos trabajando se almacena en una variable propia de Angular, llamada LOCALE_ID. Esta variable almacena, por defecto, el valor en-US, es decir, inglés de Estados Unidos. Si queremos que almacene el valor es, es decir, el español, tenemos que cargarlo en la lógica del módulo raíz (app.module.ts), así:

Observa las líneas resaltadas. Lo primero que hacemos es importar el regitro de datos locales, que forma parte del propio Angular:

Esto nos permitirá cargar el idioma que deseemos (en este caso el español), que también es parte de Angular:

Por último, usamos una función de la que disponemos gracias al registrador que hemos importado, para, precisamente, registrar el formato de notaciones en español:

Y ya está. Ya tenemos la notación en español disponible. Sin embargo, la notación por defecto sigue siendo la anglosajona. Para usarla, tenemos que indicarlo expresamente en los pipes. Vamos a volver sobre los pipes que trabajan con valores numéricos. En nuestro código (en pipes-checkin.component.html), teníamos lo siguiente:

Esto nos muestra, en pantalla, el valor formateado así:

Valor convertido: 25,895.40

Ahora vamos a añadirle, al Decimal pipe, un segundo parámetro (observa la sintaxis para hacerlo), indicándole que use la notación en español.

El resultado cambia al formato deseado:

Valor convertido: 25.895,40

POR CIERTO. Ya puestos, observa que el valor original tiene tres dígitos fraccionarios, y nosotros le hemos pedido que muestre la parte fraccionaria con dos dígitos. Lo que hace el pipe no es truncar, sino redondear. La parte fraccionaria original es .396 y nosotros obtenemos .40.

Con el pipe currency, la cosa requiere algo más. El valor de la notación local debe ser el cuarto parámetro. El tercero debe incluir una estructura de presentación numérica con la mimsma sintaxis que la del pipe number. Originalmente, teníamos lo siguiente:

Y el resultado obtenido dejaba bastante que desear:

Valor en euros: €25,895.40

Sin embargo, si le añadimos los parámetros adecuados, la cosa puede mejorarse mucho. Observa la sintaxis necesaria:

Y ahora mira como cambia el resultado:

Valor en euros: 25.895,40 €

ATENCIÓN. Lo que estamos haciendo no es una internacionalización de la aplicación, en el sentido estricto de la palabra. Es decir, el hecho de que hayamos cargado y usado la notación en español para los pipes numéricos no nos permite que la aplicación traduzca textos. El tener una aplicación en varios idiomas (lo que, como ya sabes, se conoce como i18n) es harina de otro costal. Hablaremos de ello en su momento.

CONCLUYENDO

Angular incluye muchos más pipes que los que hemos visto aquí, pero no quiero extender más este artículo. En el siguiente, seguiremos hablando de este tema, ya que nos será muy útil más adelante, cuando necesitemos configurar salidas de datos. Este artículo pretendía ser meramete introductorio al tema, y lo hemos conseguido. Puedes descargarte la aplicación que estamos creando, en su estado actual, en este enlace, aunque te aconsejo que intentes experimentar con el código por ti mismo. Aprenderás mucho más.

   

Deja un comentario