Tipos de Pipes en Angular

Kevin Andrey Bueno Solano
5 min readOct 5, 2017

--

Pipes 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

Resultado que obtendremos al usar los tipos de Pipe Standar de Angular

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 }}

https://angular.io/api/common/UpperCasePipe

LowerCasePipe

Este pipe convierte nuestra variable de tipo texto a minúscula.

https://angular.io/api/common/LowerCasePipe

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.

https://angular.io/api/common/TitleCasePipe

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 }}

https://angular.io/api/common/SlicePipe

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 ‘’.

https://angular.io/api/common/DecimalPipe#decimalpipe

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 }}

https://angular.io/api/common/PercentPipe

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.

https://angular.io/api/common/CurrencyPipe

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.

https://angular.io/api/common/AsyncPipe

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.

https://angular.io/api/common/DatePipe

Para mostrar la fecha en otro idioma vamos al app.module.ts en nuestra carpeta app e importamos lo siguiente.

Este código afecta el idioma global de Angular

JsonPipe

Nos permite visualizar JSON de una manera fácil en nuestro HTML.

https://angular.io/api/common/JsonPipe
Ejemplo JSONPipe 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.

--

--