Le Pipe in Angular 2 non introducono un concetto del tutto nuovo rispetto ad Angular 1.x, piuttosto sono una riproposizione dei Filtri, ribattezzati e integrati nella nuova architettura.
Una Pipe è una funzione di trasformazione di un valore che può essere utilizzata all'interno di un template HTML. Un esempio di Pipe che Angular 2 ci mette a disposizione è uppercase, una funzione di trasformazione che prende in input una stringa e restituisce la stringa con tutti i caratteri in maiuscolo. Possiamo utilizzare questa Pipe in un template come mostrato dal seguente esempio:
<h3>{{"Le Pipe di Angular 2" | uppercase}}</h3>Abbiamo definito un'espressione composta da una stringa e dalla Pipe uppercase separate dal carattere | (per l'appunto il carattere pipe). Da un punto di vista funzionale, la stringa viene passata alla Pipe uppercase che produce la sua versione in caratteri maiuscoli. Il markup generato da questa espressione sarà:
<h3>LE PIPE DI ANGULAR 2</h3>Passare parametri a una Pipe
È possibile passare dei parametri a una Pipe per specificare il risultato desiderato. Ad esempio, la Pipe slice restituisce una sottostringa. Possiamo specificare l'indice iniziale del carattere della sottostringa passando un intero come parametro della Pipe, come mostra il seguente esempio:
<h3>{{"Le Pipe di Angular 2" | slice:3}}</h3>Come possiamo vedere, il parametro viene passato alla Pipe facendolo seguire a due punti subito dopo il nome. Nel nostro caso, il risultato finale sarà la stringa in input senza i primi tre caratteri, cioè otterremo la stringa:
"Pipe di Angular 2"Se una Pipe prevede più parametri, possiamo passarli uno dopo l'altro separandoli con i due punti. Riprendendo sempre l'esempio di slice, questa Pipe prevede la possibilità di specificare anche l'indice finale della sottostringa desiderata. Quindi possiamo scrivere il seguente template:
<h3>{{"Le Pipe di Angular 2" | slice:3:7}}</h3>In questo caso otterremo la sottostringa individuata a partire dal carattere di indice 3 e fino al carattere precedente l'indice 7, nello specifico otterremo la sottostringa:
"Pipe"Naturalmente come parametri possiamo specificare una qualsiasi espressione il cui risultato sia compatibile con il valore atteso dalla Pipe. Quindi, ad esempio, possiamo avere espressioni come le seguenti:
<h3>{{"Le Pipe di Angular 2" | slice:3:3*2+1}}</h3>
<h3>{{myString | slice:3:myString.length - 2}}</h3>
<h3>{{myString | slice:myString.lenght - 5:myString.length - 2}}</h3>Possiamo combinare più Pipe concatenandole tra loro come nel seguente esempio:
<h3>{{"Le Pipe di Angular 2" | slice:3:7 | uppercase}}</h3>In questo caso la stringa verrà prima elaborata dalla Pipe slice e poi dalla Pipe uppercase, ottenendo come risultato finale la stringa:
PIPEPipe built in
Angular 2 ci mette a disposizione alcune Pipe di sistema che possiamo utilizzare direttamente nei template, senza bisogno di importarle esplicitamente, dal momento che fanno parte del Core del framework. Alcune di esse le abbiamo giù incontrate (uppercase e slice), facciamo un breve elenco di quelle più utilizzate:
| Pipe | Descrizione |
|---|---|
| uppercase | Converte una stringa in caratteri maiuscoli |
| lowercase | Converte una stringa in caratteri minuscoli |
| slice | Ritorna una sottostringa compresa tra due parametri: inizio e fine |
| json | Trasforma un oggetto nella sua rappresentazione JSON |
| date | Consente di formattare opportunamente una data |
| number | Consente di formattare valori numerici |
La pipe date
Tra le Pipe di più comune utilizzo date è particolarmente interessante. Nella sua forma più semplice, può essere usata come segue:
<span>{{oggi | date }}</span>Supponendo che oggi sia una variabile che contiene un oggetto di tipo data o un valore numerico, l'output dell'espressione sarà una stringa nel formato della localizzazione corrente, come Mese Giorno, Anno (es.: Nov 26, 2016).
È possibile passare un parametro alla Pipe per indicare il formato desiderato, come nel seguente esempio:
<span>{{oggi | date:"shortDate" }}</span>In questo caso il formato della data sarà del tipo MM/dd/yyyy (es.: 11/26/2016).
Sono disponibili diversi formati predefiniti e la possibilità di comporre un proprio formato personalizzato, per i quali si rimanda alla documentazione ufficiale.
La pipe number
Anche la Pipe number risulta molto utile. Ad esempio, la seguente espressione genera una stringa composta dal numero intero seguito da due decimali:
<span>{{ 123 | number:"1.2" }}</span>Il valore risultante sarà quindi "123.00".
Lo schema del formato, che passiamo a number è il seguente:
a.b-cLa tabella seguente ne chiarisce meglio il significato:
| Elemento | Descrizione | Valore di default |
|---|---|---|
| a | numero minimo di cifre intere | 1 |
| b | numero minimo di cifre decimali | 0 |
| c | numero massimo di cifre decimali | 3 |
Gli elementi dello schema sono tutti opzionali e i loro valori predefiniti sono 1 per a, 0 per b e 3 per c.
Quindi, se vogliamo specificare che un valore numerico deve avere almeno 3 posizioni dopo la virgola fino ad un massimo di 5, utilizzeremo la seguente espressione:
<span>{{ 123.456789 | number:".3-5" }}</span>Per le altre Pipe predefinite fornite da Angular 2 rimandiamo alla documentazione ufficiale.
Chi già conosce i filtri di Angular 1.x potrebbe rimanere delusi nello scoprire che non esistono Pipe corrispondenti ai filtri filter e orderBy. Questo mancato porting non è accidentale ma intenzionale. Le motivazioni hanno a che fare con questioni di performance e di problematiche legate alla minificazione.