Tipos de Pipes en Angular
Los pipes nos permiten transformar visualmente nuestros datos, de esta manera podemos mostrar datos con una mejor experiencia de usuario, un ejemplo muy practico es el de la fecha, seguramente la mayoría de nosotros prefiere ver un formato de fecha como 6 may. 2017 en el lugar de Sat May 06 2017 19:00:00 GMT-0500 (Hora est. Pacífico, Sudamérica).
Repositorio GitHub de mi App
{{ Tipos de pipes | Modos de uso }}
Para seguir, tendremos que crear una nueva aplicación sencilla con el comando.
ng new pipesApp
Esperamos pacientemente hasta que se haya creado y ejecutamos nuestra app.
ng serve -o
Abrimos la carpeta de nuestra app con nuestro editor de código favorito, yo personalmente he eliminado algo del código por defecto de nuestra app y he agregado un framework llamado Skeleton a nuestro proyecto para tener un mejor aspecto visual, cada uno puede agregar el de su preferencia o simplemente no hacerlo.
Abrimos nuestro app.component.ts y el appcomponent.ts para empezar a usar los pipes, para ello he creado una tabla en el HTML.
Resultado final
UpperCasePipe
Este pipe convierte nuestra variable de tipo texto a mayúscula.
En nuestro appcomponent.ts creamos una variable de tipo string llamada nombre y la invocamos en nuestro html {{ nombre }}.
Para usar un pipe simplemente se usa la siguiente estructura.
{{ variable | nombreDelPipe }}
LowerCasePipe
Este pipe convierte nuestra variable de tipo texto a minúscula.
TitleCasePipe
Este pipe capitaliza las primeras letras de nuestra variable de tipo texto a mayúscula.
Para este pipe he creado una nueva variable de tipo texto con le titulo de un libro.
SlicePipe
El pipe Slice podemos extraer elementos según indiquemos los parámetros del pipe. Podemos cortar desde Arrays, strings o listas.
En este ejemplo usare una colección de String’s, para pasar los parámetros escribimos la siguiente estructura:
{{ variable | slice:posicionInicial:posicionFinal }}
DecimalPipe
Nos permite mostrar números en un formato especifico. Es un poco incongruente que el pipe se llame decimal pero lo utilicemos con el nombre number. En este ejemplo he creado una variable de tipo number con el valor de PI (π) [PI = Math.PI] y tiene la siguiente estructura:
{{ var | number: ’ minimoDeEnteros . minimDeDecimales -maximoDeDecimales ’ }}
Los parámetros deben estar en formato de string ‘’.
PercentPipe
Este pipe nos convierte números a su forma de porcentaje. Este pipe tambien recibe los parámetros usados en el DecimalPipe.
{{ var | percent: ’ minimoDeEnteros . minimDeDecimales -maximoDeDecimales ’ }}
CurrencyPipe
Este pipe transforma números a formato de monedas Locales basado en las normas ISO 4217. Obedece a la siguiente estructura
{{ var | currency: ‘codigoISO’ : valorBooleanoParaMostrarSimboloOCodigoIso: ’ minimoDeEnteros . minimDeDecimales -maximoDeDecimales ’ }}
Bien, esto parece feo, pero en la practica es muy fácil.
Usa COP para pesos colombianos, EUR para Euros y USD para dolares americanos, en este ejemplo usé la moneda de Israel y configure que mostrara su símbolo.
AsyncPipe
Nos permite mostrar información que viene de Observables o Promesas.
DatePipe
Mostraremos nuestras fechas de una forma mas elegante y agradable a la vista. Este Pipe tiene muchos parámetros de configuración y podría hacer un post de solo este pipe por lo que haremos una estructura sencilla, para mas información leer la documentación.
Para mostrar la fecha en otro idioma vamos al app.module.ts en nuestra carpeta app e importamos lo siguiente.
JsonPipe
Nos permite visualizar JSON de una manera fácil en nuestro HTML.
Conclusiones:
De esta manera podemos mostrar datos de forma mas fácil y atractiva para nuestros usuarios y así mejorar la usabilidad de nuestra aplicación web, espero que haya sido claro y de fácil entendimiento este post, dejo el código de mi aplicación para que pueda ser descargado y estudiado.
