Spesso è necessario visualizzare i dati in modo chiaro e gradevole. Questo può includere la formattazione di nomi, date, prezzi, percentuali o elementi di elenco.

Se si tenta di gestire tutte queste trasformazioni manualmente nella logica del componente, i nostri template possono diventare rapidamente disordinati e difficili da leggere. Per risolvere questo problema, Angular offre una funzionalità semplice e pulita chiamata pipe — un modo per trasformare i dati direttamente nel template.

Cosa sono le Pipe?

Pensa a una pipe come a uno strumento che prende dati grezzi, li elabora e restituisce una versione modificata — un po' come un filtro in un flusso di dati.

Utilizzo delle pipe in Angular

Ogni volta che è necessario formattare i dati direttamente nel template, è possibile applicare una pipe utilizzando il simbolo | (pipe):

{{ value | pipeName }}

È anche possibile concatenare più pipe insieme:

{{ value | pipe1 | pipe2 }}

Alcune pipe accettano anche parametri, che si passano utilizzando i due punti (:):

{{ value | pipeName:param1:param2 }}

Angular offre una serie di pipe integrate per gestire le esigenze comuni di formattazione — da numeri e date a valuta e trasformazioni di maiuscole/minuscole. Esaminiamo esempi pratici, partendo dalle basi fino ad arrivare a casi d'uso più avanzati.

Trasformazione di stringhe

Supponiamo di avere una proprietà username nel tuo componente. Spesso è utile evidenziare o enfatizzare il nome di un utente mostrandolo tutto in lettere maiuscole.

Qui, la proprietà userName viene recuperata dal componente e trasformata in maiuscolo utilizzando la pipe uppercase integrata di Angular. Quindi, se userName = 'alex', l'output sulla pagina sarà: ALEX.

Formattazione delle Date

Oltre alle stringhe, uno dei tipi di dati più comuni che dovrai formattare è la data.

Immagina di avere un oggetto user. Vuoi mostrare la data in cui si è registrato in un formato chiaro e leggibile:

Se user.dateJoined = new Date(2023, 3, 15), il risultato sarà: Joined on: April 15, 2023.

La pipe date supporta un'ampia gamma di formati, come short, medium, fullDate o anche formati personalizzati come dd/MM/yyyy.

Visualizzazione della valuta

Si lavora con un oggetto product. Per mostrare il prezzo in una valuta specifica, utilizzare la pipe currency:

Se product.price = 199.99, l'output sarà: Price: $199.99.

È possibile personalizzare la pipe di valuta con le impostazioni locali, lo stile di visualizzazione e la scelta di mostrare o meno il simbolo della valuta.

Esistono molte altre pipe utili disponibili in Angular. Anche se non verranno trattate tutte qui, di seguito è riportato un elenco di riferimento rapido delle pipe non ancora menzionate:

Per ulteriori informazioni su ciascuna pipe, visita la documentazione Angular.