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

Gestire manualmente tutte queste trasformazioni all'interno della logica del componente può rapidamente rendere i template disordinati e difficili da mantenere. Per risolvere questo problema, Angular offre una funzionalità semplice ed efficace chiamata pipe — un metodo per trasformare i dati direttamente nel template.

Cosa sono le Pipe?

Pensa a una pipe come a uno strumento che riceve dati grezzi, li elabora e restituisce una versione modificata — simile a 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 include una serie di pipe integrate per gestire le esigenze comuni di formattazione — da numeri e date a valuta e trasformazioni di maiuscole/minuscole. Verranno illustrati 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 sarà necessario 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 sta lavorando 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 impostazioni locali, stile di visualizzazione e la scelta di mostrare o meno il simbolo della valuta.

Sono disponibili molte altre pipe utili 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, consultare la documentazione ufficiale di Angular.