Oblikovanje števil s pomočjo cevi v Angular

S pomočjo cevi DecimalPipe lahko oblikujemo števila. V prvem parametru cevi podamo minimalno število števk v celoštevilskem delu. V drugem parametru določimo minimalno število števk v ulomljenem delu. V tretjem neobveznem parametru določimo največje število števk v ulomljenem delu.

Kljub temu, da se naša cev imenuje DecimalPipe, za njen klic pišemo takole: number.

Poskusimo v praksi. V razredu komponente nastavimo naslednje število:

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

Primer

Izpišimo naše število tako, da bo v celoštevilskem delu dve števki. Pri tem bo minimalno število števk v ulomljenem delu 1:

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

Rezultat izvajanja kode:

html<div>18.0</div>

Primer

Zdaj določimo, naj se v ulomljenem delu našega števila prikažeta dve števki:

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

Rezultat izvajanja kode:

html<div>18.00</div>

Primer

Nastavimo novo število:

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

In ga izpišimo v HTML-predlogi tako, da se v ulomljenem delu prikažejo največ dve števki:

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

Rezultat izvajanja kode:

html<div>18.68</div>

Primer

Zdaj oblikujmo naše število tako, da so v celoštevilskem delu tri števke. V ulomljenem delu naj se prikaže pet števk:

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

Rezultat izvajanja kode:

html<div>018.67899</div>

Primer

Poskusimo izpisati minimalno število števk v ulomljenem delu, ki presega določeno količino v številu. V našem primeru izpišimo šest števk:

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

Kot rezultat izvajanja kode bomo videli, da je cev DecimalPipe dodala ničlo k ulomljenemu delu:

html<div>018.678990</div>