Angular’da Pipe’lar: Kullanım ve Örnekler

Angular’da Pipe’lar: Kullanım ve Örnekler

Merhaba, ben Fatih Soysal ve bugün sizlere Angular’da pipe’ların ne olduğunu ve nasıl kullanılacağını detaylı bir şekilde anlatacağım. Pipe’lar, Angular uygulamalarınızda verileri formatlamak ve görüntülemek için kullanabileceğiniz güçlü araçlardır. Örneğin, bir tarih değerini belirli bir formatta göstermek veya bir sayıyı para birimine dönüştürmek için pipe’ları kullanabilirsiniz. Bu sayede kodunuz daha temiz ve okunabilir hale gelir.

Pipe’lar Nedir?

Angular’da pipe’lar, verileri dönüştürmek ve formatlamak için kullanılan özel fonksiyonlardır. Bir pipe’ı, şablon dosyanızda, değişkenin ardından | işareti ve pipe’ın adı ile kullanabilirsiniz. Örneğin, bir tarih değerini “dd/MM/yyyy” formatında göstermek için date pipe’ını kullanabilirsiniz. Bu pipe’lar, Angular’ın yerleşik pipe’ları veya kendinizin geliştirdiği özel pipe’lar olabilir.

Angular’ın Yerleşik Pipe’ları

Angular, birçok kullanışlı yerleşik pipe ile birlikte gelir. Bunlardan bazıları şunlardır:

• date: Tarih değerlerini formatlar. Örnek: {{ tarihDegeri | date:'dd/MM/yyyy' }}
• currency: Sayı değerlerini para birimine dönüştürür. Örnek: {{ fiyat | currency:'TRY' }}
• uppercase: Metni büyük harflere dönüştürür. Örnek: {{ metin | uppercase }}
• lowercase: Metni küçük harflere dönüştürür. Örnek: {{ metin | lowercase }}
• json: JSON nesnelerini biçimlendirilmiş bir şekilde görüntüler. Örnek: {{ nesne | json }}
• async: Asenkron verileri işler ve görüntüler. Örnek: {{ veri$ | async }}

Bu pipe’lar, uygulamalarınıza işlevsellik katmanın hızlı ve kolay bir yoludur. Ayrıca, kodunuzun daha okunabilir ve bakımı daha kolay olmasını sağlarlar.

Kendi Pipe’larınızı Oluşturmak

Angular’ın yerleşik pipe’ları ihtiyaçlarınızı karşılamayabilir. Bu durumda, kendi özel pipe’larınızı oluşturabilirsiniz. Bu, uygulamanızın belirli gereksinimlerine göre verileri işlemenizi sağlar. Özel bir pipe oluşturmak için, @Pipe decorator’ünü kullanarak bir sınıf oluşturmanız gerekir.

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

@Pipe({
  name: 'filtre'
})
export class FiltrePipe implements PipeTransform {
  transform(value: any[], filterString: string): any[] {
    if (!filterString) return value;
    return value.filter(item => item.toLowerCase().includes(filterString.toLowerCase()));
  }
}

Bu örnekte, bir diziyi filtrelemek için bir pipe oluşturduk. Bu pipe, transform fonksiyonunu kullanarak diziyi filtreler ve sonucu döndürür. Ardından, bu pipe’ı şablonunuzda kullanabilirsiniz.

Pipe’ları Şablonda Kullanmak

Pipe’ları şablonunuzda kullanmak oldukça basittir. Bir pipe’ı kullanmak için, pipe’ın adını değişkenin ardından | işaretiyle belirtmeniz yeterlidir. Birden fazla pipe kullanabilirsiniz, bu pipe’lar soldan sağa doğru sırayla uygulanır.

Örneğin, bir tarih değerini formatlamak ve ardından büyük harflere dönüştürmek için şu kodu kullanabilirsiniz:

{{ tarihDegeri | date:'longDate' | uppercase }}

Sonuç

Angular’da pipe’lar, verileri formatlamak ve görüntülemek için güçlü ve kullanışlı araçlardır. Hem Angular’ın yerleşik pipe’larını hem de kendi özel pipe’larınızı kullanarak uygulamalarınızın okunabilirliğini ve işlevselliğini artırabilirsiniz. Daha fazla bilgi için fatihsoysal.com adresini ziyaret edebilirsiniz. Ayrıca, Angular resmi dokümanlarına da göz atmanızı öneririm. Bu dokümanlar, pipe’lar hakkında daha detaylı bilgi edinmenize yardımcı olacaktır. Angular Pipe Dokümanları

#Etiketler: Angular, Pipe, Pipe Kullanımı, Angular Pipe Örnekleri, Veri Formatlama, Özel Pipe Oluşturma, Angular Tutorial, Fatih Soysal, Angular Pipe Transform, Date Pipe, Currency Pipe, Yerleşik Pipe’lar