Angular'da Kanallarla Sayı Formatlama

DecimalPipe kanalı kullanılarak sayılar formatlanabilir. Kanalın ilk parametresinde tam sayı kısmındaki minimum basamak sayısını belirtiriz. İkinci parametrede, ondalık kısımdaki minimum basamak sayısını belirtiriz. Üçüncü isteğe bağlı parametrede ise ondalık kısımdaki maksimum basamak sayısını belirleriz.

Kanalımızın adı DecimalPipe olmasına rağmen, onu çağırmak için şunu yazarız: number.

Hadi pratikte deneyelim. Bileşen sınıfında aşağıdaki sayıyı tanımlayalım:

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

Örnek

Sayımızı, tam sayı kısmında iki basamak olacak şekilde gösterelim. Aynı zamanda ondalık kısımdaki minimum basamak sayısı 1 olacak:

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

Kodun çalıştırılmasının sonucu:

html<div>18.0</div>

Örnek

Şimdi, ondalık kısmında sayımızın iki basamak gösterilmesini sağlayalım:

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

Kodun çalıştırılmasının sonucu:

html<div>18.00</div>

Örnek

Yeni bir sayı tanımlayalım:

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

Ve onu HTML şablonunda, ondalık kısmında en fazla iki basamak gösterilecek şekilde çıktılayalım:

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

Kodun çalıştırılmasının sonucu:

html<div>18.68</div>

Örnek

Şimdi sayımızı, tam sayı kısmında üç basamak olacak şekilde formatlayalım. Ve ondalık kısmında beş basamak gösterilsin:

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

Kodun çalıştırılmasının sonucu:

html<div>018.67899</div>

Örnek

Ondalık kısımdaki minimum basamak sayısını, sayıda belirtilen miktarı aşacak şekilde çıktılamayı deneyelim. Bizim durumumuzda altı basamak çıktılayalım:

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

Kodun çalıştırılması sonucunda, DecimalPipe kanalının ondalık kısma sıfır eklediğini göreceğiz:

html<div>018.678990</div>