Memformat Angka dengan Pipe di Angular

Dengan pipe DecimalPipe kita dapat memformat angka. Pada parameter pertama pipe, kita memberikan jumlah minimum digit di bagian bilangan bulat. Pada parameter kedua kita tentukan jumlah minimum digit di bagian pecahan. Pada parameter ketiga yang opsional, kita atur jumlah maksimum digit di bagian pecahan.

Meskipun pipe kita disebut DecimalPipe, untuk memanggilnya kita menulis seperti ini: number.

Mari kita coba dalam praktik. Di kelas komponen, mari atur angka berikut:

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

Contoh

Mari tampilkan angka kita sehingga di bagian bilangan bulatnya ada dua digit. Sementara itu jumlah minimum digit di bagian pecahan akan menjadi 1:

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

Hasil eksekusi kode:

html<div>18.0</div>

Contoh

Sekarang mari atur agar di bagian pecahan angka kita ditampilkan dua digit:

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

Hasil eksekusi kode:

html<div>18.00</div>

Contoh

Mari atur angka baru:

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

Dan tampilkan di template HTML agar di bagian pecahan ditampilkan maksimal dua digit:

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

Hasil eksekusi kode:

html<div>18.68</div>

Contoh

Sekarang mari format angka kita sehingga di bagian bilangan bulatnya ada tiga digit. Dan di bagian pecahan ditampilkan lima digit:

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

Hasil eksekusi kode:

html<div>018.67899</div>

Contoh

Mari coba tampilkan jumlah minimum digit di bagian pecahan yang melebihi jumlah yang ditetapkan dalam angka. Dalam kasus kita, tampilkan enam digit:

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

Sebagai hasil eksekusi kode, kita akan melihat bahwa pipe DecimalPipe menambahkan nol ke bagian pecahan:

html<div>018.678990</div>