Lukujen muotoilu putkien avulla Angularissa

DecimalPipe-putkea voidaan käyttää lukujen muotoiluun. Putken ensimmäisessä parametrissa annamme minimimäärän numeroita kokonaisosassa. Toisessa parametrissa määritämme minimimäärän numeroita desimaaliosassa. Kolmannessa valinnaisessa parametrissa asetamme enimmäismäärän numeroita desimaaliosassa.

Huolimatta siitä, että putkemme on nimeltään DecimalPipe, kutsuaksemme sitä kirjoitamme näin: number.

Kokeillaan käytännössä. Komponentin luokassa asetetaan seuraava luku:

export class AppComponent {
	num: number = 18;
}

Esimerkki

Esitetään lukumme siten, että sen kokonaisosassa on kaksi numeroa. Samalla minimimäärä numeroita desimaaliosassa on 1:

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

Koodin suorituksen tulos:

<div>18.0</div>

Esimerkki

Asetetaan nyt, että desimaaliosassa meidän luvussamme näytetään kaksi numeroa:

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

Koodin suorituksen tulos:

<div>18.00</div>

Esimerkki

Asetetaan uusi luku:

export class AppComponent {
	num: number = 18.67899;
}

Ja esitetään se HTML-sivupohjassa siten, että desimaaliosassa näytetään enintään kaksi numeroa:

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

Koodin suorituksen tulos:

<div>18.68</div>

Esimerkki

Muotoillaan nyt lukumme siten, että sen kokonaisosassa on kolme numeroa. Ja desimaaliosassa näytetään viisi numeroa:

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

Koodin suorituksen tulos:

<div>018.67899</div>

Esimerkki

Yritetään esittää minimimäärä numeroita desimaaliosassa ylittäen luvussa asetetun määrän. Meidän tapauksessamme esitetään kuusi numeroa:

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

Koodin suorituksen tuloksena näemme, että DecimalPipe-putki lisäsi nollan desimaaliosa:

<div>018.678990</div>