Форматиране на числа с помощта на пипове в Angular

С помощта на пипа DecimalPipe можем да форматираме числа. В първия параметър на пипа подаваме минималния брой цифри в цялата част. Във втория параметър посочваме минималния брой цифри в дробната част. В третия незадължителен параметър задаваме максималния брой цифри в дробната част.

Въпреки че нашият пип се нарича DecimalPipe, за да го извикаме пишем така: number.

Нека опитаме на практика. В класа на компонента зададем следното число:

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

Пример

Нека изведем нашето число така, че в неговата цяла част да има две цифри. Като минималния брой цифри в дробната част ще бъде 1:

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

Резултат от изпълнението на кода:

html<div>18.0</div>

Пример

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

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

Резултат от изпълнението на кода:

html<div>18.00</div>

Пример

Нека зададем ново число:

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

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

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

Резултат от изпълнението на кода:

html<div>18.68</div>

Пример

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

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

Резултат от изпълнението на кода:

html<div>018.67899</div>

Пример

Нека опитаме да изведем минималния брой цифри в дробната част, който надвишава зададения брой в числото. В нашия случай ще изведем шест цифри:

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

В резултат на изпълнението на кода ще видим, че пипът DecimalPipe добави нула към дробната част:

html<div>018.678990</div>