A veces, los pipes integrados en Angular no son suficientes. Puede que necesites una transformación única específica para tu aplicación. En ese caso, puedes crear tu propio pipe personalizado.

Supongamos que tienes una lista de tareas, y cada tarea puede estar completada o no. Para que las tareas completadas se destaquen visualmente, deseas agregar automáticamente un emoji ✅ a sus títulos. En lugar de codificar esta lógica en cada plantilla, puedes crear un pipe dedicado para ello.

Cómo crear un pipe personalizado

Para generar un pipe personalizado en Angular, utiliza el siguiente comando de la CLI. Lo 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 del pipe;

• format-title.pipe.spec.ts — un archivo de pruebas unitarias (puedes eliminarlo si no necesitas 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 realmente 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). Actualiza 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á completada.

Si la tarea está completada (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.