Formattazione dei numeri con le pipe in Angular

Con la pipe DecimalPipe è possibile formattare i numeri. Nel primo parametro della pipe specifichiamo il numero minimo di cifre nella parte intera. Nel secondo parametro indichiamo il numero minimo di cifre nella parte frazionaria. Nel terzo parametro opzionale impostiamo il numero massimo di cifre nella parte frazionaria.

Nonostante la nostra pipe si chiami DecimalPipe, per richiamarla scriviamo così: number.

Proviamo nella pratica. Nella classe del componente impostiamo il seguente numero:

export class AppComponent {
	num: number = 18;
}

Esempio

Visualizziamo il nostro numero in modo che nella sua parte intera ci siano due cifre. Inoltre, il numero minimo di cifre nella parte frazionaria sarà 1:

<div>{{ num | number:'2.1' }}</div>

Risultato dell'esecuzione del codice:

<div>18.0</div>

Esempio

Ora impostiamo in modo che nella parte frazionaria del nostro numero vengano visualizzate due cifre:

<div>{{ num | number:'2.2' }}</div>

Risultato dell'esecuzione del codice:

<div>18.00</div>

Esempio

Impostiamo un nuovo numero:

export class AppComponent {
	num: number = 18.67899;
}

E visualizziamolo nel template HTML in modo che nella parte frazionaria vengano mostrate al massimo due cifre:

<div>{{ num | number:'2.1-2' }}</div>

Risultato dell'esecuzione del codice:

<div>18.68</div>

Esempio

Ora formattiamo il nostro numero in modo che nella sua parte intera ci siano tre cifre. E nella parte frazionaria vengano visualizzate cinque cifre:

<div>{{ num | number:'3.5-6' }}</div>

Risultato dell'esecuzione del codice:

<div>018.67899</div>

Esempio

Proviamo a visualizzare il numero minimo di cifre nella parte frazionaria, superiore alla quantità impostata nel numero. Nel nostro caso visualizziamo sei cifre:

<div>{{ num | number:'3.6-8' }}</div>

Come risultato dell'esecuzione del codice vedremo che la pipe DecimalPipe ha aggiunto uno zero alla parte frazionaria:

<div>018.678990</div>