Formátování čísel pomocí kanálů v Angular

Pomocí kanálu DecimalPipe lze formátovat čísla. V prvním parametru kanálu předáme minimální počet číslic v celé části. Ve druhém parametru určíme minimální počet číslic v desetinné části. Ve třetím volitelném parametru nastavíme maximální počet číslic v desetinné části.

Přestože se náš kanál jmenuje DecimalPipe, pro jeho volání píšeme takto: number.

Pojďme to vyzkoušet v praxi. V třídě komponentu nastavme následující číslo:

app/app.component.tsexport class AppComponent {
  num: number = 18;
}

Příklad

Vypišme naše číslo tak, aby v jeho celé části byly dvě číslice. Zároveň minimální počet číslic v desetinné části bude činit 1:

app/app.component.html<div>{{ num | number:'2.1' }}</div>

Výsledek provedení kódu:

html<div>18.0</div>

Příklad

Nyní nastavme, aby v desetinné části našeho čísla byly zobrazeny dvě číslice:

app/app.component.html<div>{{ num | number:'2.2' }}</div>

Výsledek provedení kódu:

html<div>18.00</div>

Příklad

Nastavme nové číslo:

app/app.component.tsexport class AppComponent {
  num: number = 18.67899;
}

A vypišme jej v HTML šabloně tak, aby v desetinné části byly zobrazeny maximálně dvě číslice:

app/app.component.html<div>{{ num | number:'2.1-2' }}</div>

Výsledek provedení kódu:

html<div>18.68</div>

Příklad

Nyní naformátujme naše číslo tak, aby v jeho celé části byly tři číslice. A v desetinné části se zobrazilo pět číslic:

app/app.component.html<div>{{ num | number:'3.5-6' }}</div>

Výsledek provedení kódu:

html<div>018.67899</div>

Příklad

Zkusme vypsat minimální počet číslic v desetinné části, který překračuje nastavený počet v čísle. V našem případě vypišme šest číslic:

app/app.component.html<div>{{ num | number:'3.6-8' }}</div>

V důsledku provedení kódu uvidíme, že kanál DecimalPipe přidal nulu k desetinné části:

html<div>018.678990</div>