Angular-da Kanallar vasitesi ile Reqemlerin Formatlanmasi

DecimalPipe kanalı vasitesi ile reqemleri formatlamaq olar. Birinci parametrde biz tam hissede minimum reqem sayını teyin edirik. Ikinci parametrde kesr hissesinde minimum reqem sayını gosteririk. Ucuncu isteye bagli parametrde ise kesr hissesinde maksimum reqem sayını teyin edirik.

Bizim kanalın adı DecimalPipe olsa da, onu cağırmaq üçün belə yazırıq: number.

Gelin praktikada sinaq edek. Komponent klasında asagidaki reqemi teyin edek:

export class AppComponent {
	num: number = 18;
}

Numune

Gelin reqemimizi elə çap edek ki, onun tam hissesinde iki reqem olsun. Eyni zamanda kesr hissesinde minimum reqem sayı 1 olsun:

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

Kodun icrası neticesi:

<div>18.0</div>

Numune

Indi gelin teyin edek ki, kesr hissesinde iki reqem olsun:

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

Kodun icrası neticesi:

<div>18.00</div>

Numune

Gelin yeni bir reqem teyin edek:

export class AppComponent {
	num: number = 18.67899;
}

Ve onu HTML şablonunda elə çap edek ki, kesr hissesinde maksimum iki reqem olsun:

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

Kodun icrası neticesi:

<div>18.68</div>

Numune

Indi ise reqemimizi elə formatlayaq ki, onun tam hissesinde uc reqem olsun. Kesr hissesinde ise bes reqem olsun:

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

Kodun icrası neticesi:

<div>018.67899</div>

Numune

Gelin kesr hissesinde minimum reqem sayını sinayaq, reqemde olan saydan daha cox olsun. Bizim numunede kesr hissesinde altı reqem gosterek:

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

Kodun icrası neticesinde görərik ki, DecimalPipe kanalı kesr hissesine sıfır elave etdi:

<div>018.678990</div>