¿Qué son los Pipes en Angular?

Los Pipes son una de las herramientas más interesantes que nos brinda Angular al momento de presentar información al usuario. Pero exactamente ¿Qué son los pipes? ¿Cómo podemos utilizarlos en nuestra aplicación? Contestaremos estas y otras preguntas en este artículo.

¿Qué son los pipes?

La palabra «pipe», traducido del inglés a «tubería» (sí, como las tuberías del juego Super Mario Bross), es un término que en Angular hace referencia a los transformadores por donde pasa cierta información antes de presentarse al usuario.

¿Cómo se utilizan los pipes?

De forma simple, podríamos llamar a los pipes como transformadores visuales de información. Para entender mejor este concepto vamos a ver un ejemplo en base a un problema real.

Supongamos que en nuestra aplicación manejamos el precio de un artículo, el cual tiene como valor 1200 dólares. A nivel de código de programación, solo tendríamos una variable númerica que tiene asignado el valor de 1200.

¿Qué podemos hacer si se requiere mostrar al usuario ese mismo valor pero acompañado del símbolo de la moneda de dólar así como redondeado a dos decimales? Antes realizar la solución del problema, veamos el contexto de nuestra aplicación.

La variable precioArticulo estaría declarada en app.component.ts de la siguiente manera:

precioArticulo: number = 1200;

El valor se muestra al usuario en app.component.html:

<p>Precio sin pipe: {{ precioArticulo }}</p>

Hasta el momento el usuario visualiza lo siguiente:

Ahora que tenemos el contexto claro, recordemos que el requerimiento es mostrar 1200 junto al símbolo de la moneda así como redondeado a 2 decimales. ¿Cómo lo hacemos? Es aquí donde los pipes entran al juego y se muestran como la mejor solución ¡en una sola línea de código!

Aplicamos el pipe Currency a la variable precioArticulo

<p> Precio con pipe: {{ precioArticulo | currency: "USD" }}</p>

Ahora, la vista se transforma y el usuario verá lo siguiente:

Como vimos en el ejemplo, los pipes nos ayudan a transformar la información que presentamos al usuario de manera muy rápida y sencilla. El proceso se representaría así:

Estructura de un Pipe

Bien, ahora que tenemos más clara la definición viendo en acción a un pipe, veamos más a detalle cómo es la manera en que se estructura y cómo podemos utilizarlos en nuestro código.

Partimos de nuestra interpolación

<p>{{ precioArticulo }}</p>

Luego aplicaremos el pipe. Para hacerlo agregamos una barra vertical » | » después de nuestra variable interpolada seguido del pipe que deseamos aplicar.

<p>{{ precioArticulo | currency: "PEN" }}</p>

Esta es la forma en cómo podemos utilizar los pipes de Angular en nuestra aplicación. Ahora bien, contamos con diversos tipos de pipes para el manejo de información, como por ejemplo: monedas, textos, respuestas de un API, etc. Aquí te mencionamos algunos de los más usados así como su referencia a la documentación oficial:

DatePipe (Ver documentación oficial)

<p>El aniversario es el {{ anniversary | date:"MM/dd/yy" }} </p>
<!--Salida 'El aniversario es el 12/28/2022'-->

UpperCasePipe y LowerCasePipe (Ver documentación oficial)

<p>En mayúsculas: <pre>'{{value | uppercase}}'</pre></p>
<!--Salida'En mayúsculas HOLA MUNDO'-->

CurrencyPipe (Ver documentación oficial)

<p>A: {{a | currency:'USD':'code'}}</p>
<!--Salida'USD0.26'-->

DecimalPipe (Ver documentación oficial)

<p>{{3.6 | number: '1.0-0'}}</p>
<!--Salida '4'-->

PercentPipe (Ver documentación oficial)

<p>A: {{a | percent}}</p>
<!--Salida'26%'-->

Estos sólo son algunos tipos de pipes que Angular nos provee. Para revisar la lista completa, puedes hacerlo accediendo a la documentación oficial de Angular desde aquí.

Ahora bien, no sólo podemos utilizar un pipe predefinido por Angular, sino también podemos combinarlos e incluso ¡crear nuestros propios pipes! pero no te preocupes, hablaremos de eso en un siguiente post.

Como ya es costumbre, también te dejo el link al repositorio del ejemplo realizado.

Desde ya muchas gracias por llegar hasta aquí, espero que esta información te haya sido de mucha utilidad así como te haya animado a utilizar pipes en tu aplicación de Angular. Nos leemos pronto en un nuevo post 😀