Getallen formatteren met pipes in Angular

Met de pipe DecimalPipe kunnen getallen worden geformatteerd. In de eerste parameter van de pipe geven we het minimumaantal cijfers in het gehele deel door. In de tweede parameter geven we het minimumaantal cijfers in het fractionele deel aan. In de derde optionele parameter geven we het maximumaantal cijfers in het fractionele deel op.

Ondanks dat onze pipe de naam DecimalPipe heeft, noemen we hem als volgt: number.

Laten we het in de praktijk proberen. In de componentclass definiëren we het volgende getal:

export class AppComponent {
	num: number = 18;
}

Voorbeeld

Laten we ons getal weergeven zodat in het gehele deel twee cijfers staan. Tegelijkertijd zal het minimumaantal cijfers in het fractionele deel 1 zijn:

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

Resultaat van de code:

<div>18.0</div>

Voorbeeld

Laten we nu instellen dat in het fractionele deel van ons getal twee cijfers worden weergegeven:

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

Resultaat van de code:

<div>18.00</div>

Voorbeeld

Laten we een nieuw getal definiëren:

export class AppComponent {
	num: number = 18.67899;
}

En we geven het weer in de HTML-template, zodat in het fractionele deel maximaal twee cijfers worden getoond:

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

Resultaat van de code:

<div>18.68</div>

Voorbeeld

Laten we ons getal nu zo formatteren, dat er drie cijfers in het gehele deel staan. En in het fractionele deel worden vijf cijfers weergegeven:

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

Resultaat van de code:

<div>018.67899</div>

Voorbeeld

Laten we proberen het minimumaantal cijfers in het fractionele deel weer te geven, dat hoger is dan het opgegeven aantal in het getal. In ons geval geven we zes cijfers weer:

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

Als resultaat van de code zullen we zien dat de pipe DecimalPipe een nul aan het fractionele deel heeft toegevoegd:

<div>018.678990</div>