Guida alle Pipe in Angular

6 Aprile 2022Coding

Le Pipe in Angular ci aiutano a formattare o trasformare i dati da visualizzare nel nostro template. Sono simili ai filtri in AngularJS. In questa guida, vedremo cosa sono le pipe e come usarle. Vedremo come passare parametri alle pipe e come concatenarle. Esamineremo l’elenco di pipe predefinite di Angular come: currency, date, number, percent, decimal e slice. Questa guida fa parte di Angular: la guida definitiva.

Index

Le Pipe in Angular
Pipe predefinite

Le Pipe in Angular

Possono verificarsi molti casi in cui potremmo dover cambiare l’aspetto dei dati prima di presentarli all’utente. Gli esempi più comuni sono le date. Un primo esempio di utilità delle pipe. Prendono i dati come input e li trasformano per ottenere l’output desiderato.

Sintassi

Dato | pipe[:Parametri]

Dove
Dato: un qualsiasi dato che vuoi trasformare
|: il carattere pipe
pipe: nome della pipe
Parametri: i parametri della pipe

Utilizzo

In questo esempio, utilizzerò la pipe date integrata Angular per trasformare appunto una data

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-root',
  template: `

 Data non formattata : {{ Data }} 

             

 Data formattata : {{ Data | date}} 

`,
  styles: [`h1 { font-family: Roboto; }`]
})
export class AppComponent  {
  Data: Date = new Date(); 
}

Nell’esempio sopra, sto prendendo la data corrente e la sto trasformando in un formato facilmente leggibile usando la pipe date. Per il confronto ho incluso il formato data non formattato.

Come passare parametri ad una pipe

Possiamo anche passare parametri opzionali alla pipe. I parametri vengono aggiunti alla pipe usando i due punti (:) seguito dal valore del parametro. Se ci sono più parametri, separali con i due punti (:). Ad esempio, la pipe di date accetta un argomento facoltativo chiamato “format”. Medium è uno dei valori validi del parametro format, che visualizza la data nel formato “yMMMdjms”.

{{Data | date:'medium'}}

Il parametro “medium” visualizza la data nel modo seguente
22 nov 2019, 22:04:10 PM

Come concatenare le pipe

Le pipe possono essere concatenate per utilizzare più pipe in un’unica espressione. Ad esempio nel codice seguente, Data viene passato alla pipe Date. L’output della pipe date viene quindi passato alla pipe uppercase.

{{Data | date | uppercase}}

Pipe predefinite

Angular ha diverse pipe predefinite che è possibile utilizzare nella propria applicazione. Puoi leggere l’elenco completo qui

Alcune delle pipe più importanti: date, uppercase, lowercase, number / decimal, currency, percent.

Date

La pipe Date formatta la data in base a determinati parametri. La sintassi della pipe date:

Data | date[:format]

Dove
Data: una data
date: il nome della pipe
format: la stringa del formato data e ora che indica il formato in cui vengono visualizzate.

Le stringhe più comuni:

Descrizione	Formato	Esempio
Anno	y	2016
Anno	yy	16
Mese	M	9
Mese	MMM	Nov
Mese	MMMM	November
Giorno	d	9
Giorno	dd	09
Ora	j	9
Ora	jj	09
Ora	h	9 AM
Ora	hh	09 AM
Ora (24)	H	12
Ora (24)	HH	12
Minuti	m	9
Minuti	mm	09
Secondi	s	9
Secondi	ss	99
Fuso orario	z	Ora del Pacifico
Fuso orario	Z	GMT-8:00
Fuso orario	a	PM
era	G	AD
era	GGGG	Anno Domini

formati più comuni:

Nome formato	Stringa	Esempio
medium	yMMMdjms	Sep 3, 2010, 12:05:08 PM
short	yMdjm	9/3/2010, 12:05 PM
fullDate	yMMMMEEEEd	Friday, September 3, 2010
longDate	yMMMMd	September 3, 2010
mediumDate	yMMMd	Sep 3, 2010
shortDate	yMd	9/3/2010
mediumTime	jms	12:05:08 PM
shortTime	jm	12:05 PM

Maggiori informazioni qui
Esempio

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
@Component({
    selector: 'app-root',
    template:`<p>medium : {{Data | date:'medium'}} </p>
              <p>short : {{Data | date:'short'}} </p>
              <p>fullDate : {{Data | date:'fullDate'}} </p>
              <p>longDate : {{Data | date:'longDate'}} </p>
              <p>mediumDate : {{Data | date:'mediumDate'}} </p>
              <p>shortDate : {{Data | date:'shortDate'}} </p>
              <p>mediumTime : {{Data | date:'mediumTime'}} </p>
              <p>dd-MM-y : {{Data | date:'dd-MM-y'}} </p>
              <p>dd-MM-yy HH:mm : {{Data | date:'dd-MM-yy HH:mm'}} </p>`
})
export class AppComponent
{
    title: string = 'Esempio di utilizzo della pipe date' ;
    Data: Date = new Date();
}

Uppercase e Lowercase

Come suggerisce il nome, queste pipe trasformano una stringa in maiuscolo o minuscolo

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
 
@Component({
    selector: 'app-root',
    template:`<p>Stringa non formattata :{{msg}} </p>
              <p>Uppercase :{{msg | uppercase}} </p>
              <p>Lowercase :{{msg | lowercase}} </p>`
})
export class AppComponent
{
    titolo: string = 'Uppercase e Lowercase' ;
    msg: string= 'dariopironi.com';
}

Maggiori info per le pipe, uppercase e Lowercase

Slice

Crea un nuovo elenco o stringa contenente un sottoinsieme (slice) della stringa o dell’array. Questa pipe utilizza le API JavaScript Array.prototype.slice() e String.prototype.slice().

Sintassi

array_o_stringa | slice:start[:end]

Dove
array_o_stringa: è la stringa da tagliare
slice: il nome della pipe
start: è la posizione/indice iniziale da cui inizierà
end: è la posizione/indice finale

Le slice accettano due parametri. Il primo parametro, start è l’indice iniziale della stringa/array. Il secondo parametro, end è l’indice finale della stringa/array. Se l’indice iniziale o finale è negativo, l’indice viene conteggiato dalla fine della stringa/array.

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
@Component({
    selector: 'app-root',
    template:`<p>Stringa completa :{{msg}} </p>
              <p>Esempio 1 :{{msg | slice:11:20}} </p>
              <p>Esempio 2 :{{msg | slice:-9}} </p>`
})
 
export class AppComponent
{
    title: string = 'Slice' ;
    msg: string= 'dariopironi.com';
}

Maggiori info per le slice

Number/Decimal

La pipe number viene utilizzata per formattare un numero.
Sintassi

numero | number[:digitInfo]

Dove
numero: è il numero che occorre formattare
number: il nome della pipe
digitInfo: una stringa con il seguente formato
{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}
Dove
minIntegerDigits è il numero minimo di cifre intere da utilizzare. Il valore predefinito è 1.
minFractionDigits è il numero minimo di cifre dopo la frazione. Il valore predefinito è 0.
maxFractionDigits è il numero massimo di cifre dopo la frazione. Il valore predefinito è 3.

Esempio

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
@Component({
    selector: 'app-root',
    template: `<p> Non formattato :{{num}}</p>
               <p> Formattato :{{num | number}}</p>
               <p> Formattato :{{num | number:'3.1-2'}}</p>
               <p> Formattato :{{num | number:'7.1-5'}} </p>`
})
 
export class AppComponent
{
    title: string = 'Number/Decimal' ;
    num: number= 9542.14554;
}

Percent

Formatta il numero indicato come percentuale.

numero | percent[:digitInfo]

Dove
numero è il numero da formattare
percent, il nome della pipe
digitInfo è una stringa simile a quella utilizzato nella pipe decimal

Esempio

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
 
@Component({
    selector: 'app-root',
    template:`<p>Non formattato :{{per}} </p>
              <p>Esempio 1 :{{per | percent }} </p>
              <p>Esempio 2 :{{per | percent:'1.2-2'}} </p>`
})
export class AppComponent
{
    title: string = 'Percent' ;
    per: number= .7414;2';
}

Maggiori info qui

Currency

Formatta un numero come valuta.

numero | currency[:currencyCode[:symbolDisplay[:digitInfo]]]

Dove
Numero, il numero da formattare come valuta
Currency, il nome della pipe
currencyCode è il codice valuta ISO 4217, come USD per il dollaro USA e EUR per l’euro.
symbolDisplay è un valore booleano che indica se utilizzare il simbolo o il codice della valuta. Utilizza true per visualizzare il simbolo e false per utilizzare il codice
digitInfo è simile a quello utilizzato nella pipe decimale

Esempio

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
@Component({
    selector: 'app-root',
    template: `<p>Non formattato :{{cur}} </p>
               <p>Esempio 1 :{{cur | currency }} </p>
               <p>Esempio 2 :{{cur | currency:'INR':true:'4.2-2'}} </p>`
})
 
export class AppComponent
{
    title: string = 'Currency' ;
    cur: number= 175;
}

Maggiori informazoni sulla pipe currency.