Форматирање на броеви со употреба на цевки во Angular

Со помош на цевката DecimalPipe може да се форматираат броеви. Во првиот параметар на цевката го пренесуваме минималниот број на цифри во целобројниот дел. Во вториот параметар го одредуваме минималниот број на цифри во дробниот дел. Во третиот незадолжителен параметар го задаваме максималниот број на цифри во дробниот дел.

И покрај тоа што нашата цевка се вика DecimalPipe, за нејзино повикување пишуваме вака: number.

Ајде да пробаме во пракса. Во класата на компонентата да го поставиме следниов број:

export class AppComponent {
	num: number = 18;
}

Пример

Ајде да го прикажеме нашиот број така што во неговиот целоброен дел ќе има две цифри. Притоа минималниот број на цифри во дробниот дел ќе биде 1:

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

Резултат од извршувањето на кодот:

<div>18.0</div>

Пример

Сега ајде да одредиме, во дробниот дел од нашиот број да се прикажат две цифри:

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

Резултат од извршувањето на кодот:

<div>18.00</div>

Пример

Ајде да поставиме нов број:

export class AppComponent {
	num: number = 18.67899;
}

И да го прикажеме во HTML-шаблонот така што во дробниот дел да се прикажат максимално две цифри:

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

Резултат од извршувањето на кодот:

<div>18.68</div>

Пример

Сега да го форматираме нашиот број така, што во неговиот целоброен дел ќе има три цифри. А во дробниот дел ќе се прикажат пет цифри:

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

Резултат од извршувањето на кодот:

<div>018.67899</div>

Пример

Ајде да пробаме да го прикажеме минималниот број на цифри во дробниот дел, кој го надминува зададениот број во бројот. Во нашиот случај ќе прикажеме шест цифри:

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

Како резултат на извршувањето на кодот ќе видиме, дека цевката DecimalPipe додала нула во дробниот дел:

<div>018.678990</div>