Formattazione della valuta utilizzando una pipe in Angular

Con la pipe CurrencyPipe è possibile formattare l'output della valuta. Nel primo parametro della pipe viene passato il codice valuta secondo la specifica ISO 4217 (impostazione predefinita USD). Nel secondo parametro impostiamo la visualizzazione della valuta. Può assumere i seguenti valori: 'code' (codice valuta), 'symbol' (il suo simbolo), 'symbol-narrow' (per i paesi che hanno più simboli di valuta), 'string' (per output di qualsiasi stringa). Nel terzo parametro opzionale possiamo impostare il formato del numero, simile alla pipe DecimalPipe. Nel quarto parametro opzionale è possibile specificare il codice della località utilizzata:

<div>{{ value | number : codice valuta : visualizzazione valuta : formato numero : codice località }}</div>

Esempi

Proviamo il funzionamento della pipe con alcuni esempi. Per fare ciò, nella classe del componente impostiamo la seguente proprietà salary, contenente uno stipendio in una certa valuta:

export class AppComponent {
	salary: number = 867.564;
}

Esempio

Convertiamo il nostro numero in valuta:

<div>{{ salary | currency }}</div>

Risultato dell'esecuzione del codice:

<div>$867.56</div>

Esempio

Ora specifichiamo la visualizzazione della valuta in rubli russi:

<div>{{ salary | currency:'RUB':'code' }}</div>

Risultato dell'esecuzione del codice:

<div>RUB867.56</div>

Esempio

Visualizziamo accanto al numero il simbolo del rublo russo:

<div>{{ salary | currency:'RUB':'symbol-narrow' }}</div>

Risultato dell'esecuzione del codice:

<div>₽867.56</div>

Esempio

Ora specifichiamo il numero con quattro cifre nella parte frazionaria:

<div>{{ salary | currency:'RUB':'symbol':'2.4-5' }}</div>

Risultato dell'esecuzione del codice:

<div>RUB867.5640</div>

Esempio

Aggiungiamo alla visualizzazione della valuta la seguente stringa:

<div>{{ salary | currency:'RUB':'this is a new currency - ' }}</div>

Risultato dell'esecuzione del codice:

<div>this is a new currency - 867.56</div>