Angular Pipe Nedir?

Angular’da Pipe, verilerin gösterilmeden önce dönüştürülmesini sağlayan güçlü bir araçtır. Pipe’lar, data-binding ifadeleri içinde kullanılabilen ve component template’inde veriyi formatlamak, dönüştürmek veya filtrelemek için kullanılan fonksiyonlardır. Angular, uygulamalarda yaygın olarak kullanılan bazı yerleşik Pipe’lar sunar, ancak geliştiriciler kendi özel Pipe’larını da oluşturabilirler. Pipe’lar, veri dönüşümlerini component mantığından ayırarak kodun daha okunabilir, bakımının kolay ve yeniden kullanılabilir olmasını sağlar.

Angular Varsayılan Pipe’ler

• DatePipe: Yerel tarih kurallara göre tarihleri formatlar.
• UpperCasePipe: Text’leri büyük harflee çevirir.
• LowerCasePipe: Text’leri küçük harflere çevirir.
• CurrencyPipe: Parasal sayıları para birimi biçiminde gösterir.
• DecimalPipe: Yerel kurallara göre sayıları gösterir. Örneğin binlik ve onluk ayıraç için nokta, virgül ayarlarının verilmesini sağlar.
• PercentPipe: Bir sayıyı yüzdelik gösterimde gösterir.
• AsyncPipe: Observable olan kaynağa Subscribe ve unsubscribe olmayı sağlar.
• JsonPipe: Objeleri JSON string formatında gösterir.

Pipe Kullanımı

Pipe’ler template içerisinde “template-expression” dan sonra “|” işareti verilditen sonra kullanılır. Örnek aşağıdaki gibidir. Bu örnekte “date” bir Pipe’ı ifade etmektedir

import { Component } from '@angular/core';
import { DatePipe } from '@angular/common';

@Component({
  standalone: true,
  selector: 'app-birthday',
  templateUrl: './birthday.component.html',
  imports: [DatePipe], // import edilir yoksa template içerisinde erişilmez.
})
export class BirthdayComponent {
  birthday = new Date(1988, 3, 15); // April 15, 1988 -- since month parameter is zero-based
}

<p>The hero's birthday is {{ birthday | date }}</p>

Bazı Pipe’ler parametre alır. Parametre vermek için Pipe isminden hemen sonra iki nokta üstüste ile verilebilir. Örneğin bu şekilde “pipe: parametre”.

<p> {{ birthday | date:"shortDate" }} in the "shortDate" format.</p>

Pipe’ler bir zincir gibi birbirlerini çağırabilirler. Aşağıdaki örnekte hem tarihi formatlmaış hemde büyük harf ile gösterilmiştir.

<p>
  The chained hero's uppercase birthday in "fullDate" format is
  {{ birthday | date:'fullDate' | uppercase}}
</p>

Custom Pipe Kullanımı

Angular’da ihtiyaca yönelik özel Pipe’ler oluşturulabilir. Bunun için hemen aşağıdaki örnek Pipe kodunu inceleyelim. Pipe aynı component gibi bir sınıftır. Fakat bu sınıf Angular compiler’ın bu sınıfı bir Pipe olarak ele alması için “@Pipe” decorator’ü ile işaretlenmiştir. Bu decoratör’ün en önemli parametresi “name” dir. Çünkü bu Pipe, bu “name” parametresine verilecek isim ile template’lerde kullanılacaktır.

Ayrıca Angular’ın yeni sürümlerinde Pipe’lerde standalone olabileceklerdir. Ayrıca koda dikkatli baktığınızda Pipe sınıfının “PipeTransform” interface’ini implement’e ettiğini göreceksiniz.

export declare interface PipeTransform {
    transform(value: any, ...args: any[]): any;
}

İşte Pipe’lerin gücü buradan gelmektedir. Çünkü Bu interface “transform()” adında bir metot bulunmaktadır. Geliştiricilerde bu metodu implemente ederek kendi iş matıklarını uygularlar.

Aşağıdaki Pipe aldığı sayının karesini hesaplayıp geri dönüyor.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  standalone: true,
  name: 'exponentialStrength'
})
export class ExponentialStrengthPipe implements PipeTransform {
  transform(value: number, exponent = 1): number {
    return Math.pow(value, exponent);
  }
}

Oluşturulan custom Pipe’ın kullanımı varsayılan olarak gelen Pipe’ler ile aynıdır.

import { Component } from '@angular/core';
import { ExponentialStrengthPipe } from './exponential-strength.pipe';

@Component({
  standalone: true,
  selector: 'app-power-booster',
  template: `
    <h2>Power Booster</h2>
    <p>Super power boost: {{2 | exponentialStrength: 10}}</p> // burada çağrılmıştır.
  `,
  imports: [ExponentialStrengthPipe]
})
export class PowerBoosterComponent { }

Angular “detect-changes” algoritmasına göre verdikleri tepkiye göre, “Pure Pipes” ve “Impure Pipes” olarak iyi ayrılırlar. Angularda varsayılan olarak bütün Pipe’ler “Pure Pipes” olarak kabul edilir. Bulundukları içerik render edildiğinde veya bağlı oldukları değişken değiştiğinde bir kere çalışırlar. Fakat “Impure Pipes” olanlar Angular “detect-changes” algoritmasının her çalışmasında tetiklenirler. Kısacası klavyedeki her tuş basıldığında yada her fare hareketinde çalışacaktır. Bir custom Pipe’i “Impure” yapmak için decorator’de “pure” parametresine “false” verilmesi yeterlidir. Ancak, performans açısından dikkatli olunması gereken bir konudur.

@Pipe({
  standalone: true,
  name: 'flyingHeroesImpure',
  pure: false
})

Eğer Pipe, referans tipi veriler (örneğin, nesneler veya diziler) üzerinde çalışıyorsa ve bu verilerin içeriği sık sık değişiyorsa, Impure Pipe kullanımı mantıklı olabilir. Pure Pipe’lar yalnızca referans değiştiğinde çalışır, bu yüzden içeriği değişen ancak referansı değişmeyen veri yapılarında Impure Pipe kullanılabilir.

Angular’da Pipe’lar, veri formatlama ve dönüştürme işlemlerini kolaylaştıran güçlü araçlardır. Projelerinizde Pipe’ları etkin bir şekilde kullanarak, kodunuzu daha temiz, okunabilir ve bakım yapılabilir hale getirebilirsiniz. Ayrıca, kendi özel Pipe’larınızı oluşturarak, projelerinizin ihtiyaçlarına göre özel veri işleme ve formatlama çözümleri geliştirebilirsiniz.

Yazıyı, yeni başlayanlar veya İngilizcesi yeterli olmayanlar için mümkün olduğunca anlaşılır bir şekilde yazmaya çalıştım. Umarım faydalı olmuştur. Aklınıza takılan herhangi bir soruyu çekinmeden yorumlarda sorabilirsiniz.

Yaralanılan Kaynaklar:

Angular