Angular Pipe Nedir? Custom Pipe Nasıl Yapılır?
Bu yazıda, aşağıdaki konuları örneklendirerek kısa ve açık bir şekilde anlatmaya çalışacağım.
- Angular Pipe Nedir ve Nasıl Kullanılır?
- Angular’ın Bize Sağladığı Hazır Pipe’lar Nelerdir?
- Custom Pipe Nasıl Yapılır ve Kullanılır?
- Sonuç
Angular Pipe Nedir ve Nasıl Kullanılır?
Pipe’lar angularJS sürümünde Filter adıyla hayatımıza girdi. Angular 2 sürümünden itibaren Pipe olarak adlandırılmaktadır. Pipe’ları filtreleme veya dönüştürme olarak tanımlayabiliriz. Herhangi bir veriyi component içerisine kod yazmadan template üzerinde dönüştürebilir ve yeniden kullanabiliriz. Üstelik Pipe’lar ile bunu yüksek performansla ve immutable olarak yapabiliriz. Ayrıca Pipe’lar, bir iş akışı devam ederken verinin işlenmesini sağlar.
Pipe’lar HTML içerisinde| ile kullanılır.
Angular’ın Bize Sağladığı Hazır Pipe’lar Nelerdir?
Angular içerisinde bize sağladığı hazır pipeler bulunur. Aşağıda sık kullanılan Pipe’ları açıklarak, basitçe örneklendirmeye çalıştım.
- AsyncPipe: Observable veya Promiselerin yayınladığı son değerin gösterilmesini sağlar.
app.component.ts
time$ = new Observable<string>((observer: Observer<string>) => {
setInterval(() => observer.next(new Date().toString()), 1000);
});app.component.html
<div>{{ time$ | async }}</div>Output
Sun Jan 10 2021 21:43:01 GMT+0300 (GMT+03:00)
- JsonPipe: Verilen objenin arayüzde json yapısında gösterilmesini sağlar.
app.component.ts
user = {
id: 1,
fullname: {
firstname: 'Angular',
lastname: 'Pipes',
},
};app.component.html
{{user | json}}Output
{ "id": 1, "fullname": { "firstname": "Angular", "lastname": "Pipes" } }
- UpperCasePipe: Verilen string değerin tamamının büyük harfle gösterilmesini sağlar.
{{'Angular'| uppercase}} => ANGULAR- LowerCasePipe: Verilen string değerin tamamının küçük harfle gösterilmesini sağlar.
{{'ANGULAR'| lowercase}} => angular- TitleCasePipe: Verilen string değerin başlık formatı şeklinde gösterilmesini sağlar.
{{'angular pipe'| titlecase}} => Angular Pipe- SlicePipe: Verilen dizi veya string değerin, gönderilen parametrelere göre bölünmesini sağlar.
{{'Angular'| slice:2:6}} => gula- DatePipe: Verilen tarih değerin, gönderilen parametrelere göre gösterilmesini sağlar.
{{1610301383709 | date:'hh:mm'}} => 08:54- CurrencyPipe: Verilen sayı değerinin para birimi olarak gösterilmesini sağlar.
{{7.569 | currency}} => $7.57
{{7.569 | currency:'CAD'}} => CA$7.57- PercentPipe: Verilen sayı değerinin yüzde biçiminde gösterilmesini sağlar.
{{0.259| percent}} => 26%- DecimalPipe: Verilen sayı değerinin ondalıklı gösterilmesini sağlar.
{{6.256341| number}} => 6.256- KeyValuePipe: Object veya Maplerin ngFor ile dönülmesini sağlar.
app.component.ts
countryList: Country = { countryCode: "TR", countryName: "Turkey" };app.component.html
<div *ngFor="let country of countryList | keyvalue">
{{country.value}}
</div>Output
TR
Turkey
Angular Pipe ile ilgili detaylı bilgiye https://angular.io/guide/pipes adresinden ulaşabilirsiniz.
Custom Pipe Nasıl Yapılır ve Kullanılır?
Angular içerisinde birçok hazır Pipe bulunur ama ihtiyaç ve talepler doğrultusunda bunlar yetersiz kalabilir. Bu durumda kendimize özel Pipe oluşturarak istediğimiz işlevselliği kazandırmalıyız. Derleyici hatası ile karşılaşmamak için oluşturduğumuz Custom Pipe’larımızı app.module.ts dosyası içerisinde bulunan declarations kısmına eklemeliyiz.
Şimdi örnekler üzerinden Custom Pipe‘ı öğrenmeye çalışalım. Öncelikle Custom Pipe yapmak için bir proje oluşturalım.
İster manuel olarak ister Angular CLI ile ng g pipe <name> komutunu kullanarak Pipe oluşturabilirsiniz.
src/app/phone-number.pipe.ts dosyasını oluşturalım ve inceleyelim.
Bir sınıfı Pipe olarak kullanabilmek için “PipeTransform” interface’ini implemente etmemiz gerekmektedir.
@Pipe decorator’u içerisinde bulunan name alanı Pipe’mızın ismini belirtir. Pipe’ımızı kullanmak istediğimiz sayfalarda bu isimle çağıracağız.
transform() metodu her Pipe içerisinde bulunur ve ilk parametre olarak, dönüştürme işlemine tabi tutulacak değeri alır. İsteğe bağlı olarak string, number, array, object, date vs. tipinde birden fazla parametre de kullanabilirsiniz.
Transform methodunu detaylı olarak inceleyelim.
İlk parametre olarak string tipinde phoneNumber değeri almaktadır. İkinci parametre olarak yine string tipinde prefix değeri alıyoruz. Metodumuz bu değerleri istenilen şekle dönüştürerek string tipinde yeni bir çıktı dönüyor.
Oluşturduğumuz PhoneNumberPipe’ımızı app.module.ts içerisinde bulunan declarations kısmına eklemeliyiz.
PhoneNumberPipe’ımızı HTML içerisinde nasıl kullanacağımızı görelim.
Projeyi çalıştırdığınızda aşağıdaki gibi bir çıktı göreceksiniz.
Custom Pipe konusunu pekiştirmek için bir örnek daha yapalım.
src/app/country.pipe.ts dosyasını oluşturalım ve inceleyelim.
Transform metodu; ilk parametre(countryList) olarak Country tipinde bir array, ikinci parametre(countryCode) olarak da string tipinde bir değer almaktadır. Verilen countryCode değeri, countryList içinde bulunamadı ise çıktı olarak “-” dönüyor. Country bilgisi bulunuyor ise aşağıdaki iki duruma bağlı olarak çıktı dönüyor.
- countryName karakter sayısı 8 den büyük ise string ifadenin ilk 8 karakterini alarak devamına “…” ekliyoruz.
- countryName karakter sayısı 8 den küçük ise değerini değişikliğe uğratmıyoruz.
Oluşturduğumuz CountyPipe’mızı app.module.ts içerisinde bulunan declarations kısmına eklemeliyiz.
CountryPipe’ımızı HTML içerisinde nasıl kullanacağımızı görelim.
Component’te countryList ve countryCode parametrelerine değer verdik.
Projeyi çalıştırdığınızda aşağıdaki gibi bir çıktı göreceksiniz.
SONUÇ
Angular Pipe kullanımı, Angular içerisinde hazır bulunan Pipe’ların neler olduğunu ve Custom Pipe’ın nasıl oluşturulduğunu öğrendik. Umarım faydalı bir yazı olmuştur ve keyif almışsınızdır :)
Bu yazıda Custom Pipe için yazdığım örnek uygulama kodlarına GitHub’dan erişebilirsiniz.
Tüm yazılarımı https://medium.com/@sevilayozbek adresinden inceleyebilirsiniz.
