Formatarea numerelor folosind pipe-uri în Angular

Cu ajutorul pipe-ului DecimalPipe se pot formata numere. În primul parametru al pipe-ului transmitem numărul minim de cifre în partea întreagă. În al doilea parametru specificăm numărul minim de cifre în partea fracționară. În al treilea parametru opțional stabilim numărul maxim de cifre în partea fracționară.

În ciuda faptului că pipe-ul nostru se numește DecimalPipe, pentru apelarea lui scriem astfel: number.

Să încercăm în practică. În clasa componentei să stabilim următorul număr:

export class AppComponent {
	num: number = 18;
}

Exemplu

Să afișăm numărul nostru astfel, încât în partea sa întreagă să fie două cifre. În același timp numărul minim de cifre în partea fracționară va fi 1:

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

Rezultatul executării codului:

<div>18.0</div>

Exemplu

Acum să stabilim ca în partea fracționară a numărului nostru să fie afișate două cifre:

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

Rezultatul executării codului:

<div>18.00</div>

Exemplu

Să stabilim un număr nou:

export class AppComponent {
	num: number = 18.67899;
}

Și să îl afișăm în șablonul HTML astfel, încât în partea fracționară să fie afișate maxim două cifre:

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

Rezultatul executării codului:

<div>18.68</div>

Exemplu

Acum să formatăm numărul nostru astfel, încât în partea sa întreagă să fie trei cifre. Iar în partea fracționară să fie afișate cinci cifre:

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

Rezultatul executării codului:

<div>018.67899</div>

Exemplu

Să încercăm să afișăm numărul minim de cifre în partea fracționară, care depășește numărul stabilit în număr. În cazul nostru afișăm șase cifre:

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

Ca rezultat al executării codului vom vedea, că pipe-ul DecimalPipe a adăugat un zero la partea fracționară:

<div>018.678990</div>