Formatiranje brojeva pomoću kanala u Angularu

Pomoću kanala DecimalPipe možemo formatirati brojeve. U prvom parametru kanala prosleđujemo minimalni broj cifara u celom delu. U drugom parametru navodimo minimalni broj cifara u razlomljenom delu. U trećem, opcionom parametru, zadajemo maksimalni broj cifara u razlomljenom delu.

Uprkos tome što se naš kanal zove DecimalPipe, za njegovo pozivanje pišemo ovako: number.

Hajde da probamo u praksi. U klasi komponente zadajmo sledeći broj:

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

Primer

Hajde da ispišemo naš broj tako da u celom delu budu dve cifre. Pritom će minimalni broj cifara u razlomljenom delu biti 1:

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

Rezultat izvršavanja koda:

html<div>18.0</div>

Primer

Sada hajde da zadamo da u razlomljenom delu našeg broja budu prikazane dve cifre:

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

Rezultat izvršavanja koda:

html<div>18.00</div>

Primer

Hajde da zadamo novi broj:

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

I ispišimo ga u HTML šablonu tako da u razlomljenom delu budu prikazane maksimalno dve cifre:

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

Rezultat izvršavanja koda:

html<div>18.68</div>

Primer

Sada formatirajmo naš broj tako da u celom delu budu tri cifre. A u razlomljenom delu neka se prikaže pet cifara:

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

Rezultat izvršavanja koda:

html<div>018.67899</div>

Primer

Hajde da pokušamo da ispišemo minimalni broj cifara u razlomljenom delu koji premašuje zadati broj cifara u broju. U našem slučaju ispisaćemo šest cifara:

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

Kao rezultat izvršavanja koda videćemo, da je kanal DecimalPipe dodao nulu razlomljenom delu:

html<div>018.678990</div>