A volte, le pipe integrate in Angular non sono sufficienti. Potresti aver bisogno di una trasformazione unica, specifica per la tua applicazione. In questo caso, puoi creare una pipe personalizzata.

Supponiamo di avere un elenco di attività, e ogni attività può essere completata o meno. Per far risaltare visivamente le attività completate, desideri aggiungere automaticamente un'emoji ✅ ai loro titoli. Invece di inserire questa logica manualmente in ogni template, puoi creare una pipe dedicata.

Come creare una pipe personalizzata

Per generare una pipe personalizzata in Angular, utilizza il seguente comando CLI. La chiameremo formatTitle, poiché il suo compito è formattare il titolo dell'attività in base allo stato di completamento:

Questo comando creerà due file:

• format-title.pipe.ts — la logica della pipe;

• format-title.pipe.spec.ts — un file di test unitario (puoi eliminarlo se al momento non hai bisogno di testare).

Quando Angular genera la pipe, appare in questo modo:

Ecco cosa fa questo codice:

• La classe FormatTitlePipe implementa PipeTransform, il che garantisce che la pipe abbia un metodo transform;

• Il metodo transform riceve un valore (l'input) e argomenti opzionali, restituendo un risultato trasformato. Al momento, restituisce semplicemente l'input così com'è;

• Il nome della pipe (formatTitle) è definito nel decoratore @Pipe — è il nome che verrà utilizzato nel template.

Attualmente, la pipe esiste ma non esegue alcuna operazione. Aggiungiamo ora la logica effettiva.

Implementazione di una Pipe Personalizzata

È necessario aggiungere un'emoji ✅ al titolo in base allo stato di completamento dell'attività (task.completed). Aggiornare la pipe per applicare la nostra logica di formattazione personalizzata:

Il metodo transform accetta due argomenti:

• value — il titolo dell'attività;

• completed — un valore booleano che indica se l'attività è stata completata.

Se l'attività è completata (true), aggiunge un'emoji ✅ alla fine del titolo. Altrimenti, restituisce semplicemente il titolo senza modifiche.

Utilizzo della Pipe in un Template

Per utilizzare la pipe nel tuo template Angular, applicala con il simbolo pipe |:

Cosa succede qui:

• task.title è il valore passato alla pipe;

• formatTitle:task.completed applica la pipe e invia il flag completed;

• Il titolo includerà o meno l'emoji ✅, a seconda dello stato dell'attività.

L'utilizzo delle pipe in questo modo aiuta a mantenere i template puliti e leggibili, spostando la logica di formattazione in codice riutilizzabile e testabile.