Angular 4 Uygulamalarında Built-in Pipes İle Çalışmak

Merhaba,

Bu içeriğimizde, Angular uygulamalarında elimizdeki veriler üzerinde belirli filtreleme işlemleri uygulamamıza yarayan Built-in Pipes yapılarını inceleyeceğiz. Mimariye dahili bir yapısallıkla karşımıza çıkan bu filtrelerin dışında ayriyetten bir başka makalemizde Custom Pipes yapıları üzerinede konuşacağız.

İlk olarak Pipes yapılarının değerler üzerinde nasıl kullanıldığına dair değinmemiz gerekirse eğer;

value | pipe

yukarıdaki prototipte gördüğünüz üzere değerden hemen sonra belirtilen “|” karakterinin ardından ilgili filtrelemede bulunacak pipe hangisiyse belirtmemiz yeterli olacaktır.

Ayrıca bir Pipe’ye parametre girilmesi gerekiyorsa eğer aşağıdaki prototipte olduğu gibi hareket edilmesi gerekmektedir;

value | pipe : 'parametre1' : 'parametre2' : ...

Şimdi elden geldiğince mevcut Pipe keywordlerini aşağıda tek tek ele alalım.

Pipes

• date
  Tarihsel veriler üzerinde formatlandırma çalışmaları için kullanılan bir filtredir.

  import { Component, OnInit } from '@angular/core';
  @Component({
    selector: 'app-pipe',
    templateUrl: './pipe.component.html',
    styleUrls: ['./pipe.component.css']
  })
  export class PipeComponent implements OnInit {
    today: Date = new Date();
    constructor() { }
    ngOnInit() {
    }
  }
  

  Yukarıda tanımlanmış “today” değişkeni üzerinde deneylerimizi gerçekleştirirsek eğer;

  {{today}}
  

  pipe kullanmadan karşımıza “Tue May 01 2018 15:49:30 GMT+0300 (Türkiye Standart Saati)” şeklinde bir sonuçla çıkmaktadır.

  {{today | date}}
  

  “date” filtresini uygularsak eğer tarihsel verimiz “May 1, 2018” şeklinde formatlandırılacaktır.

  {{ today | date : "MM/dd/yy" }}
  

  Bir yandan yukarıda olduğu gibi parametrik olarak tarihsel verimizi daha da özel bir şekilde formatlandırabilmekteyiz. Bu şekilde çalıştığımızda sonucu “05/01/18” şeklinde ekrana basacaktır.

  Vee diğer parametreleri incelersek eğer;

  {{ today | date : "shortDate"  }}
  

  Ekran çıktısı : “5/1/18”

  {{ today | date : "fullDate"  }}
  

  Ekran çıktısı : “Tuesday, May 1, 2018 “

• uppercase
  Metinsel yapılardaki tüm değerleri büyük harfe çevirir.

  import { Component, OnInit } from '@angular/core';
  @Component({
    selector: 'app-pipe',
    templateUrl: './pipe.component.html',
    styleUrls: ['./pipe.component.css']
  })
  export class PipeComponent implements OnInit {
    name: string = "GeNçAy YıLdIz";
    constructor() { }
    ngOnInit() {
    }
  }
  

  {{name | uppercase}}
  

  Ekran çıktısı : “GENÇAY YILDIZ”

• lowercase
  Metinsel yapılardaki tüm değerleri küçük harfe çevirir.

  {{name | lowercase}}
  

  Ekran çıktısı : “gençay yıldız”

• currency
  Sayısal değerleri para birimine çevirir ve sembolik değer katar.

  import { Component, OnInit } from '@angular/core';
  @Component({
    selector: 'app-pipe',
    templateUrl: './pipe.component.html',
    styleUrls: ['./pipe.component.css']
  })
  export class PipeComponent implements OnInit {
    price: number = 4200;
    constructor() { }
    ngOnInit() {
    }
  }
  

  {{price | currency}}
  

  Ekran çıktısı : “$4,200.00”
  Eğer ki para birimini kendiniz belirlemek isterseniz aşağıdaki gibi parametre vermeniz yeterlidir.

  {{price | currency : 'TL'}}
  

  Ekran çıktısı : “TL4,200.00”
  Eğer ki, sıfırları ve küsüratları ayarlamak istiyorsanız da aşağıdaki gibi parametrik çalışmanız yeterlidir.

  {{price | currency : "TL" : "symbol" : "6.3"}}
  

  Burada, sayısal değeri gerekirse başına sıfır ekleyerek altı haneye çıkarmakta(6.3) ve küsüratada üç adet sıfır eklemektedir(6.3).
  Ekran çıktısı : “TL004,200.000”

• percent
  Sayısal değerleri yüzdelik(%) olarak göstermemizi sağlar.

  import { Component, OnInit } from '@angular/core';
  @Component({
    selector: 'app-pipe',
    templateUrl: './pipe.component.html',
    styleUrls: ['./pipe.component.css']
  })
  export class PipeComponent implements OnInit {
    integer: number = 4200;
    constructor() { }
    ngOnInit() {
    }
  }
  

  {{integer | percent }}
  

  Ekran çıktısı : “420,000%”
  Eğer ki sayısal değerimizi “integer: number = 0.129;” şeklinde güncellersek “percent” filtresi yuvarlama yapacak ve “13%” değerini bize sunacaktır.

  {{integer | percent : "9.5"}}
  

  Bu şekilde bir çalışma ise “currency” filtresindekiyle aynı mantıkta tam sayıyı sıfırlarla dokuz haneye, küsüratı ise 5 haneye çıkarmaya yarıyacaktır.

Angular 4 çatısı altında Built-in Pipes yapılarını incelemiş olduk. Sonraki yazılarımızda Custom Pipes konusunu ele alacak ve kendi Pipe yapımızı oluşturacağız.

Sonraki yazılarımda görüşmek üzere…
İyi çalışmalar…