A veces, las tuberías integradas en Angular no son suficientes. Puede que necesite una transformación única que sea específica para su aplicación. En ese caso, puede crear su propia tubería personalizada.

Suponga que tiene una lista de tareas, y cada tarea puede estar completada o no. Para que las tareas completadas destaquen visualmente, desea agregar automáticamente un emoji ✅ a sus títulos. En lugar de codificar esta lógica en cada plantilla, puede crear una tubería dedicada para ello.

Cómo crear una tubería personalizada

Para generar una tubería personalizada en Angular, utilice el siguiente comando de la CLI. La llamaremos formatTitle, ya que su función es formatear el título de la tarea según su estado de finalización:

Esto creará dos archivos:

• format-title.pipe.ts — la lógica de la tubería;

• format-title.pipe.spec.ts — un archivo de pruebas unitarias (puede eliminarlo si no necesita pruebas en este momento).

Cuando Angular genera el pipe, se ve de la siguiente manera:

Esto es lo que hace este código:

• La clase FormatTitlePipe implementa PipeTransform, lo que garantiza que el pipe tenga un método transform;

• El método transform recibe un valor (la entrada) y argumentos opcionales, y devuelve un resultado transformado. En este punto, simplemente retorna la entrada tal como está;

• El nombre del pipe (formatTitle) se define en el decorador @Pipe — ese es el nombre que se utilizará en la plantilla.

Por ahora, el pipe existe pero no realiza ninguna acción. A continuación, agregaremos la lógica real.

Implementación de un Pipe Personalizado

Es necesario agregar un emoji ✅ al título según el estado de finalización de la tarea (task.completed). Actualice el pipe para aplicar nuestra lógica de formato personalizada:

El método transform recibe dos argumentos:

• value — el título de la tarea;

• completed — un valor booleano que indica si la tarea está finalizada.

Si la tarea está completa (true), agrega un emoji ✅ al final del título. De lo contrario, simplemente devuelve el título sin cambios.

Uso del Pipe en una Plantilla

Para utilizar el pipe en tu plantilla de Angular, aplícalo con el símbolo de pipe |:

Explicación de lo que sucede aquí:

• task.title es el valor que se pasa al pipe;

• formatTitle:task.completed aplica el pipe y envía el indicador completed;

• El título incluirá o no el emoji ✅, dependiendo del estado de la tarea.

El uso de pipes de esta manera ayuda a mantener las plantillas limpias y legibles, y traslada la lógica de formato a código reutilizable y comprobable.