Formátovanie čísel pomocou kanálov v Angular

Pomocou kanála DecimalPipe je možné formátovať čísla. V prvom parametri kanála predávame minimálny počet číslic v celočíselnej časti. V druhom parametri špecifikujeme minimálny počet číslic v zlomkovej časti. V treťom voliteľnom parametri nastavujeme maximálny počet číslic v zlomkovej časti.

Napriek tomu, že sa náš kanál volá DecimalPipe, na jeho volanie píšeme takto: number.

Vyskúšajme to v praxi. V triede komponentu nastavme nasledujúce číslo:

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

Príklad

Vypíšme naše číslo tak, aby v jeho celočíselnej časti boli dve číslice. Zároveň minimálny počet číslic v zlomkovej časti bude 1:

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

Výsledok vykonania kódu:

html<div>18.0</div>

Príklad

Teraz nastavme, aby v zlomkovej časti nášho čísla boli zobrazené dve číslice:

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

Výsledok vykonania kódu:

html<div>18.00</div>

Príklad

Nastavme nové číslo:

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

A vypíšme ho v HTML šablóne tak, aby v zlomkovej časti boli maximálne dve číslice:

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

Výsledok vykonania kódu:

html<div>18.68</div>

Príklad

Teraz naformátujme naše číslo tak, aby v jeho celočíselnej časti boli tri číslice. A v zlomkovej časti sa zobralo päť číslic:

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

Výsledok vykonania kódu:

html<div>018.67899</div>

Príklad

Skúsme vypísať minimálny počet číslic v zlomkovej časti, ktorý prevyšuje zadaný počet v čísle. V našom prípade vypíšme šesť číslic:

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

V dôsledku vykonania kódu uvidíme, že kanál DecimalPipe pridal nulu k zlomkovej časti:

html<div>018.678990</div>