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>