Számok formázása pipe-ok segítségével Angularban

A DecimalPipe segítségével számokat formázhatunk. A pipe első paramétereként a szám egész részében található minimális számjegyek számát adjuk meg. A második paraméterben a tört részben található minimális számjegyek számát határozzuk meg. A harmadik, opcionális paraméterben a tört részben megjelenő maximális számjegyek számát adjuk meg.

Annak ellenére, hogy a pipe neve DecimalPipe, a hívásakor így írjuk: number.

Próbáljuk ki gyakorlatban. A komponens osztályban állítsuk be a következő számot:

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

Példa

Jelenítsük meg a számunkat úgy, hogy az egész része két számjegyből álljon. Eközben a tört részben lévő minimális számjegyek száma 1 legyen:

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

A kód végrehajtásának eredménye:

html<div>18.0</div>

Példa

Most állítsuk be, hogy a számunk tört része két számjegyet jelenítsen meg:

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

A kód végrehajtásának eredménye:

html<div>18.00</div>

Példa

Állítsunk be egy új számot:

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

És jelenítsük meg a HTML-sablonban úgy, hogy a tört rész legfeljebb két számjegyet mutasson:

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

A kód végrehajtásának eredménye:

html<div>18.68</div>

Példa

Most formázzuk a számunkat úgy, hogy az egész része három számjegyből álljon. A tört részben pedig öt számjegy jelenjen meg:

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

A kód végrehajtásának eredménye:

html<div>018.67899</div>

Példa

Próbáljuk meg megjeleníteni a minimális számjegyek számát a tört részben, meghaladva a számban megadott mennyiséget. Esetünkben jelenítsünk meg hat számjegyet:

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

A kód végrehajtásának eredményeként látni fogjuk, hogy a DecimalPipe nullát adott hozzá a tört réshez:

html<div>018.678990</div>