Angular'da Pipe Kullanarak Para Birimi Biçimlendirme

CurrencyPipe kullanılarak para birimi çıktısı biçimlendirilebilir. Pipe'ın ilk parametresinde ISO 4217 spesifikasyonuna göre para birimi kodu verilir (varsayılan olarak USD). İkinci parametrede para biriminin görüntülenme şeklini belirleriz. Şu değerleri alabilir: 'code' (para birimi kodu), 'symbol' (sembolü), 'symbol-narrow' (birden fazla para birimi sembolüne sahip ülkeler için), 'string' (herhangi bir string çıktısı için). Üçüncü opsiyonel parametrede, DecimalPipe ile benzer şekilde sayı formatını belirleyebiliriz. Dördüncü opsiyonel parametrede ise kullanılacak lokal kodunu belirtebiliriz:

html<div>{{ value | currency : para birimi kodu : para birimi görünümü : sayı formatı : lokal kodu }}</div>

Örnekler

Pipe'ın çalışmasını örneklerle deneyelim. Bunun için bileşen sınıfında, belirli bir para biriminde maaşı içeren salary özelliğini tanımlayalım:

app/app.component.tsexport class AppComponent {
  salary: number = 867.564;
}

Örnek

Sayımızı para birimine dönüştürelim:

app/app.component.html<div>{{ salary | currency }}</div>

Kodun çalışma sonucu:

html<div>$867.56</div>

Örnek

Şimdi para birimi görüntülemesini Rus rublesi olarak belirleyelim:

app/app.component.html<div>{{ salary | currency:'RUB':'code' }}</div>

Kodun çalışma sonucu:

html<div>RUB867.56</div>

Örnek

Sayının yanına Rus rublesi sembolünü yazdıralım:

app/app.component.html<div>{{ salary | currency:'RUB':'symbol-narrow' }}</div>

Kodun çalışma sonucu:

html<div>₽867.56</div>

Örnek

Şimdi sayıyı kesirli kısmında dört rakamla gösterelim:

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

Kodun çalışma sonucu:

html<div>RUB867.5640</div>

Örnek

Para birimi görüntüsüne aşağıdaki stringi ekleyelim:

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

Kodun çalışma sonucu:

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

Pratik Görevler

typescriptsalary: number = 134.89;

typescript'$134.89'

typescriptsalary: number = 134.89;

typescript'€134.89'

typescriptsalary: number = 134.89;

typescript'$134.890'

typescriptsalary: number = 134.89;

typescript'$0,134.8900'

typescriptsalary: number = 134.89;

typescript'this currency is changed 134.89'