A volte, le pipe predefinite di 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, garantendo che la pipe abbia un metodo transform;

• Il metodo transform riceve un valore (l'input) e argomenti opzionali, restituendo un risultato trasformato. In questa fase, restituisce semplicemente l'input senza modifiche;

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

Attualmente, la pipe esiste ma non esegue ancora alcuna operazione. Aggiungiamo la logica effettiva nel prossimo passaggio.

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 invariato.

Utilizzo della Pipe in un Template

Per utilizzare la pipe nel template Angular, applicarla 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 del task.

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