Las canalizaciones en Angular son funciones simples que se utilizan para transformar datos en plantillas sin modificar los datos subyacentes. Las canalizaciones toman un valor, lo procesan y devuelven una salida formateada o transformada. A menudo se utilizan para dar formato a fechas, números, cadenas e incluso matrices u objetos.

Le permiten formatear y mostrar datos en un formato más legible o relevante directamente en la vista sin alterar el modelo de datos subyacente.

El uso de tuberías ayuda a mantener el código limpio y legible. En lugar de escribir una lógica compleja en las plantillas o componentes, puede encapsular esa lógica en una tubería, que luego se puede reutilizar en diferentes partes de su aplicación.
Por ejemplo, si estás desarrollando una plataforma de blogs donde los usuarios pueden ver la fecha de publicación de los artículos. Las fechas deben mostrarse en un formato fácil de usar, como "31 de agosto de 2024", en lugar del formato sin formato "2024–08–31T14:48:00.000Z". Con pipes, puede usar el DatePipe integrado de Angular en la plantilla en lugar de formatear manualmente la fecha en el componente, lo que satura el código y reduce la legibilidad.

Published on: {{ article.publishDate | date:'longDate' }}

Para aplicar una tubería, use el operador pipe (|) dentro de una expresión de plantilla como se muestra en el ejemplo de código anterior.

Tuberías empotradas

Angular viene con varios canales integrados que cubren tareas comunes (DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe, AsyncPipe, JsonPipe,, etc.). Saber cómo usarlos puede hacer que tu código sea más limpio y eficiente.

Ejemplos:

{{ user | json }}
Price: {{ product.price | currency:'USD' }}
{{ user.name | uppercase }}

Precio: {{ producto.precio | moneda:'USD' }}

{{ nombre.usuario | mayúscula }}

Tuberías parametrizadas

Muchas pipes angulares aceptan parámetros para personalizar su comportamiento.

Para especificar el parámetro, siga el nombre de la tubería con dos puntos (:) y el valor del parámetro

Algunas tuberías aceptan múltiples parámetros, que están separados por dos puntos adicionales.

Los parámetros pueden ser opcionales o requeridos. Suponga que tiene una canalización personalizada que da formato a la moneda y requiere que especifique el tipo de moneda como parámetro. Si no se proporciona este parámetro, es posible que la canalización no pueda formatear el valor correctamente.

The product price is {{ price | customCurrency:'USD' }}

1. DatePipe con parámetros

Published on: {{ article.publishDate | date:'MMMM d, y, h:mm:ss a' }}

Esto formatea la fecha como “31 de agosto de 2024, 2:48:00 p.m.”.

2. Tubería de moneda con parámetros

Price: {{ product.price | currency:'EUR':'symbol-narrow':'1.0-0' }}

Esto formatea el precio como “1235 €” (redondeado sin decimales).

Encadenamiento de tuberías

Puedes encadenar varias tuberías para lograr transformaciones complejas.

{{ article.content | slice:0:100 | uppercase }}

Esto dividirá los primeros 100 caracteres de article.content y los convertirá a mayúsculas.

Tuberías personalizadas

A veces, es posible que las tuberías integradas no satisfagan sus necesidades específicas y necesitará crear una tubería personalizada para manejar la lógica específica. Así es como puedes hacerlo.

Ejemplo:

En el siguiente ejemplo, vamos a crear una canalización que agrega un saludo a un nombre como “¡Hola, Alice!”

Ejecute el siguiente comando para generar una nueva tubería:

ng generate pipe greet

Ahora, modifiquemos el archivo greet.pipe.ts en el directorio src/app para incluir la lógica de canalización:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'greet',  // This is the name you'll use in the template
  standalone: true,
})
export class GreetPipe implements PipeTransform {
  transform(value: string): string {
    return `Hello, ${value}!`;  // This is the transformation logic
  }
}

Una vez que tu tubería esté lista, puedes usarla en tus plantillas.

{{ 'Alice' | greet }}

Crear una tubería personalizada parametrizada

Ahora vamos a hacer que el saludo sea personalizable, para que puedas decir "¡Hola, Alice!" o "¡Bienvenida, Alice!" dependiendo de lo que pases a la tubería.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'greet',  // Same pipe name as before
  standalone: true,
})
export class GreetPipe implements PipeTransform {
  transform(value: string, greeting: string = 'Hello'): string {
    return `${greeting}, ${value}!`;  // Now it uses the greeting passed in
  }
}

El método de transformación ahora tiene un segundo parámetro, saludo. Si no se proporciona ningún saludo, el valor predeterminado es "Hola".

Ahora puedes personalizar el saludo en tus plantillas.

{{ 'Alice' | greet:'Hi' }}
{{ 'Bob' | greet:'Welcome' }}

Tuberías puras versus impuras

1. Tuberías puras
De forma predeterminada, todas las tuberías angulares son puras. Una tubería pura solo se llama cuando los datos de entrada (como un número o una cadena) o cuando cambia la referencia a un objeto (como una matriz o una fecha). Esto hace que Pure Pipes sea eficiente y eficaz porque la tubería no funciona innecesariamente.

Sin embargo, si sus datos son más complejos, como una matriz de elementos, es posible que Angular no note cambios dentro de la matriz (como agregar un nuevo elemento) porque la referencia a la matriz no ha cambiado.

A menos que sea necesario, mantén tus tuberías puras para evitar renderizaciones innecesarias y mantener el rendimiento.

Ejemplo:

@Pipe({
  name: "onSale",
  standalone: true,
  pure: true,
})
export class OnSalePipe implements PipeTransform {
  transform(items: Item[]): Item[] {
    return items.filter((item) => item.isOnSale);
  }
}

En tu plantilla:

• {{ item.name }} - {{ item.price | formatPrice }}

Si agrega un nuevo artículo a la matriz items que está en oferta, es posible que espere que aparezca en la lista. Pero si simplemente inserta el nuevo elemento en la matriz, es posible que la lista no se actualice porque la referencia de la matriz no ha cambiado.

2. Tuberías impuras

Una tubería impura, por otro lado, se llama cada vez que Angular realiza un ciclo de detección de cambios. Sin embargo, debido a que se ejecutan con tanta frecuencia, pueden ralentizar tu aplicación.

Ejemplo:

@Pipe({
  name: "onSaleImpure",
  standalone: true,
  pure: false,
})
export class OnSaleImpurePipe implements PipeTransform {
  transform(items: Item[]): Item[] {
    return items.filter((item) => item.isOnSale);
  }
}

En tu plantilla:

• {{ item.name }} - {{ item.price | formatPrice }}

Ahora, cuando agregues un nuevo elemento, la tubería notará el cambio y actualizará la lista.

Mejores prácticas para el uso de tuberías

1. Mantenga las tuberías simples. Evite cálculos pesados ​​en tuberías

2. Nombrar canalizaciones de forma clara y descriptiva

3. Mantenga las tuberías enfocadas en una única responsabilidad

4. Evite tuberías impuras cuando sea posible

5. Prueba exhaustivamente las tuberías personalizadas

Conclusión

Las tuberías angulares agilizan las tareas de transformación de datos, haciendo que su código sea más modular, reutilizable y fácil de mantener. Ayudan a imponer coherencia en toda la aplicación y mejorar la legibilidad de sus plantillas, lo cual es crucial para desarrollar aplicaciones escalables y mantenibles.