A menudo necesitamos mostrar datos de una manera clara y visualmente atractiva. Esto puede incluir el formato de nombres, fechas, precios, porcentajes o elementos de una lista.

Si intentamos manejar todas estas transformaciones manualmente dentro de la lógica del componente, nuestras plantillas pueden volverse rápidamente desordenadas y difíciles de mantener. Para resolver esto, Angular proporciona una característica sencilla y eficiente llamada pipes — una forma de transformar datos directamente en la plantilla.

¿Qué son los Pipes?

Piensa en un pipe como una herramienta que toma datos en bruto, los procesa y entrega una versión modificada; es similar a un filtro en un flujo de datos.

Uso de pipes en Angular

Siempre que sea necesario formatear datos directamente en la plantilla, se puede aplicar un pipe utilizando el símbolo | (pipe):

{{ value | pipeName }}

Incluso es posible encadenar múltiples pipes:

{{ value | pipe1 | pipe2 }}

Algunas tuberías también aceptan parámetros, que se pasan utilizando dos puntos (:):

{{ value | pipeName:param1:param2 }}

Angular incluye un conjunto de tuberías integradas para gestionar necesidades comunes de formato, desde números y fechas hasta moneda y transformaciones de mayúsculas y minúsculas. A continuación, se presentan ejemplos prácticos, comenzando por lo básico y avanzando hacia casos de uso más avanzados.

Transformación de cadenas

Suponga que tiene una propiedad username en su componente. A menudo es útil resaltar o enfatizar el nombre de un usuario mostrándolo en mayúsculas.

Aquí, la propiedad userName se obtiene del componente y se transforma a mayúsculas utilizando el pipe incorporado uppercase de Angular. Por lo tanto, si userName = 'alex', la salida en la página será: ALEX.

Formateo de fechas

Además de las cadenas de texto, uno de los tipos de datos más comunes que necesitarás formatear es una fecha.

Imagina que tienes un objeto user. Quieres mostrar la fecha en que se unió en un formato claro y legible:

Si user.dateJoined = new Date(2023, 3, 15), el resultado sería: Joined on: April 15, 2023.

El pipe date admite una amplia variedad de formatos, como short, medium, fullDate o incluso formatos personalizados como dd/MM/yyyy.

Visualización de moneda

Se está trabajando con un objeto product. Para mostrar el precio en una moneda específica, utilice el pipe currency:

Si product.price = 199.99, la salida será: Price: $199.99.

Puede personalizar el pipe de moneda con configuraciones de localización, estilo de visualización y si mostrar o no el símbolo de la moneda.

Existen muchos otros pipes útiles disponibles en Angular. Aunque no se cubrirán todos aquí, a continuación se muestra una lista de referencia rápida de pipes que aún no se han mencionado:

Para obtener más información sobre cada pipe, visita la documentación oficial de Angular.