Pemformatan Mata Uang dengan Pipe di Angular

Dengan menggunakan pipe CurrencyPipe, kita dapat memformat tampilan mata uang. Pada parameter pertama pipe, kode mata uang sesuai spesifikasi ISO 4217 (diatur secara default sebagai USD) diteruskan. Pada parameter kedua, kita mengatur tampilan mata uang. Parameter ini dapat menerima nilai-nilai berikut: 'code' (kode mata uang), 'symbol' (simbolnya), 'symbol-narrow' (untuk negara yang memiliki beberapa simbol mata uang), 'string' (untuk menampilkan string apa pun). Pada parameter ketiga yang opsional, kita dapat mengatur format angka, mirip dengan pipe DecimalPipe. Pada parameter keempat yang opsional, kode lokal yang digunakan dapat ditentukan:

<div>{{ value | currency : kode mata uang : tampilan mata uang : format angka : kode lokal }}</div>

Contoh

Mari kita coba kerja pipe dengan contoh. Untuk melakukan ini, dalam kelas komponen, kita atur properti berikut salary, yang berisi gaji dalam suatu mata uang:

export class AppComponent {
	salary: number = 867.564;
}

Contoh

Mari ubah angka kita menjadi mata uang:

<div>{{ salary | currency }}</div>

Hasil eksekusi kode:

<div>$867.56</div>

Contoh

Sekarang mari tentukan tampilan mata uang dalam rubel Rusia:

<div>{{ salary | currency:'RUB':'code' }}</div>

Hasil eksekusi kode:

<div>RUB867.56</div>

Contoh

Mari tampilkan simbol rubel Rusia di sebelah angka:

<div>{{ salary | currency:'RUB':'symbol-narrow' }}</div>

Hasil eksekusi kode:

<div>₽867.56</div>

Contoh

Sekarang mari ubah angka dengan empat digit di bagian pecahan:

<div>{{ salary | currency:'RUB':'symbol':'2.4-5' }}</div>

Hasil eksekusi kode:

<div>RUB867.5640</div>

Contoh

Mari tambahkan string berikut ke tampilan mata uang:

<div>{{ salary | currency:'RUB':'this is a new currency - ' }}</div>

Hasil eksekusi kode:

<div>this is a new currency - 867.56</div>