Angular, kullanıcıya veriyi farklı biçimlerde sunmak için kullanılan “pipes” adlı güçlü bir özellik içerir. Basitçe söylemek gerekirse, bir pipe, veriyi istediğiniz formatta görüntülemek için kullanılan bir dönüştürme fonksiyonudur.
Temel Kullanım
Pipe’ları şu şekilde kullanabiliriz:
|
1 2 3 |
{{ value | pipeName }} |
Dahili Pipes
Angular, bazı yaygın kullanılan dönüşümler için hazırda bulunan pipe’ları içerir. İşte bazı örnekler:
Date Pipe: Tarihleri farklı formatlarda göstermek için kullanılır.
|
1 2 3 |
{{ today | date:'shortDate' }} |
Çıktı: 12/5/21
|
1 2 3 |
{{ today | date:'fullDate' }} |
Çıktı: Sunday, December 5, 2021
|
1 2 3 |
{{ today | date:'yMMMM' }} |
Çıktı: December 2021
|
1 2 3 |
{{ today | date:'shortTime' }} |
Çıktı: 5:05 PM
|
1 2 3 |
{{ today | date:'full' }} |
Çıktı: Sunday, December 5, 2021 at 5:05:08 PM GMT+02:00
Kendi formatlarınızı oluşturabilirsiniz. Örneğin, sadece günü ve saati göstermek için:
|
1 2 3 |
{{ today | date:'d, h:mm a' }} |
Çıktı: 5, 5:05 PM
UpperCase Pipe & LowerCase Pipe: Metni büyük harf veya küçük harf yapar.
|
1 2 3 |
{{ 'merhaba' | uppercase }} |
Çıktı: MERHABA
|
1 2 3 |
{{ 'MERHABA' | lowercase }} |
Çıktı: merhaba
Decimal Pipe: Sayıları belirtilen ondalık formatında gösterir.
|
1 2 3 |
{{ 3.141592 | number:'3.2-2' }} |
Çıktı: 003.14
Percent Pipe: Sayıları yüzde olarak gösterir.
|
1 2 3 |
{{ 0.25 | percent }} |
Çıktı: 25%
Currency Pipe: Sayıları belirttiğiniz para birimi formatında göstermek için kullanılır. Bu pipe, uluslararasılaştırma (i18n) konularında da oldukça esnektir ve çeşitli para birimleri için destek sunar.
CurrencyPipe’ı kullanmanın temel yapısı şu şekildedir:
|
1 2 3 |
{{ value_expression | currency [ : currencyCode [ : display [ : digitsInfo [ : locale ] ] ] ] }} |
-
currencyCode: Hangi para birimiyle formatlama yapılacağını belirtir. Örneğin: ‘USD’, ‘EUR’, ‘TRY’ vb.
-
display: Para biriminin nasıl görüntülenmesi gerektiğini belirtir: ‘code’ (örn. ‘USD’), ‘symbol’ (örn. ‘$’) veya ‘symbol-narrow’ (bazı para birimlerinde daha dar bir sembol gösterir). Bu parametre belirtilmezse, varsayılan olarak ‘symbol’ kullanılır.
-
digitsInfo: Sayının nasıl formatlanması gerektiğini belirten bir dizedir. ‘minIntegerDigits’.’minFractionDigits’-‘maxFractionDigits’ formatındadır.
-
locale: Sayıların nasıl formatlanacağını belirtir. Örneğin ‘en-US’, ‘fr-FR’, ‘tr-TR’ vb.
Basit Kullanım:
|
1 2 3 |
{{ 150 | currency:'USD' }} |
Çıktı: $150.00
Para Birimi Kodunu Gösterme:
|
1 2 3 |
{{ 150 | currency:'USD':'code' }} |
Çıktı: USD150.00
Özelleştirilmiş Sayı Formatı:
|
1 2 3 |
{{ 150.4567 | currency:'USD':'symbol':'1.2-4' }} |
Çıktı: $150.46 (En az 1 tam sayı, ondalık kısımda en az 2, en fazla 4 basamak gösterilir.)
Farklı Lokalle:
|
1 2 3 |
{{ 150 | currency:'EUR':'symbol':'1.2-2':'fr-FR' }} |
Çıktı: 150,00 € (Fransız formatıyla)
Umarım “Angular Pipes: Veriyi Dönüştürme” başlıklı yazım sizin için faydalı olmuştur.
Şu yazılar da ilginizi çekebilir.
Yeni bir yazımda görüşmek üzere.
Happy coding!
