Форматирање бројева користећи цеви у 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>