Фарматаванне лікаў з дапамогай каналаў у 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>