Angular Pipes

İş hayatımda yaşadığım bazı değişikliklerden dolayı uzun süre ara verdiğimiz Angular Seri’sine Pipe lar ile devam ediyoruz.

Angular Pipe, verileri biçimlendirmek, dönüştürmek için kullandığımız ve yeri geldiğinde listelerimizi filitrelememizi sağlayan yapılardır. Filitreleme işlemlerini daha ileride göreceğiz.

Dosyalarımızın başlangıç halleri aşağıdadır.

app.component.ts dosyamızda bir kullanıcı listesi oluşturalım.

userList = [
    {
        name: "Lorem",
        date: 489445200000
    },
    {
        name: "Ipsum",
        date: 131580000000
    },
    {
        name: "Dolor",
        date: 754696800000
    }
];

app.component.html içerisinde listemizi görüntüleyelim.

<ul>
    <li *ngFor="let user of userList">
        <span>
            {{user.name}}
        </span>
        <i>
            {{user.date}}
        </i>
    </li>
</ul>

Kullanıcı isimlerini büyük harf (uppercase) yapalım.

<ul>
    <li *ngFor="let user of userList">
        <span>
            {{user.name | uppercase}}
        </span>
        <i>
            {{user.date}}
        </i>
    </li>
</ul>

user.name ifadesinin yanına pipe işareti (|) ekledim ve ardından uppercase fonksiyonunu çağırdım.

Şimdi de tarih bölümünü düzenleyelim.

<ul>
    <li *ngFor="let user of userList">
        <span>
            {{user.name | uppercase}}
        </span>
        <i>
            {{user.date | date: "dMy"}}
        </i>
    </li>
</ul>

user.date ifadesine date pipe ekledim. Format olarak dMy kullandım:

• d: date
• M: month (büyük harf olmasının sebebi minute ifadesinin “m” ile belirtilmesidir.)
• y: year

Tarih bölümleri tam anlaşılmıyor. Biraz daha düzgün hale getirelim.

{{user.date | date: "d/M/y"}}

Şimdi daha iyi ancak tek haneli rakamları çift haneli yapalım.

{{user.date | date: "dd/MM/y"}}

Yılın aylarını üç harfli string olarak yazdıralım.

{{user.date | date: "dd/MMM/y"}}

Yılın aylarını tam olarak yazdıralım.

{{user.date | date: "dd/MMMM/y"}}

DatePipe ile ilgili detaylı bilgi için angular.io adresine bakabilirsiniz.

Yılın aylarını büyük harf yazdıralım.

{{user.date | date: "dd/MMMM/y" | uppercase}}

Görüldüğü gibi iki yada daha fazla pipe arka arkaya uygulanabilir.

Parasal değerleri formatlayalım. app.component.html dosyamızda değişiklik yapalım.

<ul>
    <li *ngFor="let user of userList">
        <span>
            {{user.name | uppercase}}
        </span>
        <i>
            {{user.date | date: "dMy"}}
        </i>
    </li>
</ul>
<div> 
    Ücret: {{1500}}
<div>

Ücret bölümünü formatlayalım.

<div> 
    Ücret: {{1500 | currency}}
<div>

Default olarak dolar kabul edilir ancak bunu değiştirebiliriz.

<div> 
    Ücret: {{1500 | currency: "TRY":"":""}}
<div>

currrency ifaesinden sonra gelen ilk tırnak içerisine para birimini belirtiriz, örneğin USD, CAD.

<div> 
    Ücret: {{1500 | currency: "TRY":"TL":""}}
<div>

İkinci tırnak içerisine para simgesini belirtiriz, örneğin TL, $, £.

<div> 
    Ücret: {{1500 | currency: "TRY":"TL":"4.2-2"}}
<div>

Üçüncü tırnak içerisine ise formatı belirtiriz. Bu bölümü biraz inceleyelim.

"4.2–2" ifadesinde bulunan 4 rakamı küsürattan önce en az kaç hane olacağını belirtir. Küsürat bizm için kuruş değerine karşılık geliyor, yani noktadan sonra gelen sayıdır.

Dünyada bir kaç ülke dışında küsüratları virgül ile ayıran başka ülke olmadığı için default ayraç nokta kullanılır. Bunu nasıl değiştireceğimizi ileride göreceğiz.

4 rakamından sonra gelen 2–2 ise küsürat bölümünün en az ve en çok kaç hane olacağını belirtir. İlk 2 ifadesi en az kaç hane olacağını, sonraki 2 ifadesi ise en çok kaç hane olacağını belirler. Dolayısıyla ikinci 2 ifadesi, ilk 2 ifadesinden büyük olamaz, hata verir.

Aynı formatlamayı DecimalPipe için kullanırız.

Sonraki konumuz Detaylı Component Yapısı olacaktır.