¿Qué es una Pipe y Cómo usar las Pipes integradas en Angular?

Pipes en Angular (I)

En Angular, una Pipe es una característica que permite transformar y formatear datos en la plantilla HTML de una manera sencilla y reutilizable. Las Pipes son una herramienta poderosa que facilita la manipulación y presentación de datos en la interfaz de usuario.

Imagina que tienes una aplicación Angular que muestra una lista de productos con sus precios. Algunos de los precios pueden tener muchos decimales y ser largos, lo que dificulta la legibilidad. En lugar de mostrar los precios directamente como están en la base de datos, puedes utilizar una Pipe para formatearlos y presentarlos de una manera más amigable y concisa.

Las Pipes integradas en Angular son funciones predefinidas que vienen con el framework y están disponibles para ser utilizadas sin necesidad de importar nada adicional. Algunas de las Pipes más comunes son:

1. UpperCasePipe: Convierte un texto a mayúsculas. Ejemplo: {{ 'hola mundo' | uppercase }} Resultado: "HOLA MUNDO"
2. LowerCasePipe: Convierte un texto a minúsculas. Ejemplo: {{ 'HOLA MUNDO' | lowercase }} Resultado: "hola mundo"
3. DatePipe: Formatea una fecha en diferentes formatos. Ejemplo: {{ hoy | date: 'dd/MM/yyyy' }} Resultado: "04/07/2023"
4. CurrencyPipe: Formatea un número como una moneda. Ejemplo: {{ precio | currency: 'USD' }} Resultado: "$50.00"
5. DecimalPipe: Formatea un número con una cantidad de decimales específica. Ejemplo: {{ pi | number: '1.2-2' }} Resultado: "3.14"
6. PercentPipe: Formatea un número como porcentaje. Ejemplo: {{ 0.75 | percent }} Resultado: "75%"

Como puedes ver, para usar una Pipe en Angular, simplemente se coloca el operador | en la plantilla HTML, seguido del nombre de la Pipe y sus parámetros (si los tiene).

En resumen, las Pipes en Angular son una herramienta poderosa y versátil que facilita la presentación y manipulación de datos en la plantilla HTML. Permiten formatear y transformar datos de manera rápida y sencilla, mejorando la experiencia del usuario y la legibilidad de la interfaz de usuario. Con las Pipes, puedes mantener la lógica de transformación separada de la lógica de negocio, lo que resulta en un código más organizado y mantenible.