Özel Pipe’ler
Özel Pipe’ler, Angular uygulamalarında veri dönüşümlerini ve formatlamayı şablon seviyesinde yönetmek için kullanılan güçlü araçlardır. Bu pipe’ler sayesinde, verilerin sunum mantığını bileşenlerden ayırarak temiz, yeniden kullanılabilir ve test edilebilir kod yazmak mümkün olur. Özel Pipe’ler, metin biçimlendirme, liste filtreleme, tarih ve sayı formatlama gibi işlemleri gerçekleştirebilir ve uygulamanın performansını optimize ederek gereksiz yeniden render’ları önler.
Angular, saf (pure) pipe’leri yalnızca giriş değerleri değiştiğinde çalıştırır, bu da uygulamaların performansını artırır ve gereksiz hesaplamaların önüne geçer. Bu yapı, Angular’ın temel kavramları olan bileşenler, durum yönetimi, veri akışı ve yaşam döngüsü ile entegre bir şekilde çalışır. Modern SPA ve web uygulamalarında, özellikle büyük veri tabloları, filtrelenebilir listeler ve dinamik içeriklerde özel pipe kullanımı kritik öneme sahiptir.
Bu eğitimde, temel bir özel pipe oluşturmanın yanı sıra, ileri düzey uygulama senaryolarında pipe’lerin nasıl kullanılacağını, performans optimizasyonunu ve yaygın hatalardan kaçınma yöntemlerini öğreneceksiniz. Özel pipe’ler ile veri dönüşümlerini yönetmeyi ve Angular projelerinizde kod tekrarını minimize etmeyi öğrenecek, uygulama mimarisini daha sürdürülebilir hâle getireceksiniz.
Temel Örnek
typescriptimport { Pipe, PipeTransform } from '@angular/core';
import { Component } from '@angular/core';
@Pipe({
name: 'capitalize'
})
export class CapitalizePipe implements PipeTransform {
transform(value: string): string {
if (!value) return '';
return value.charAt(0).toUpperCase() + value.slice(1);
}
}
@Component({
selector: 'app-root',
template: ` <h1>Özel Pipe Örneği</h1> <p>Orijinal metin: {{ text }}</p> <p>Pipe ile dönüşmüş: {{ text | capitalize }}</p>
`
})
export class AppComponent {
text: string = 'angular ile geliştirme';
}Bu örnekte, CapitalizePipe adlı özel bir pipe oluşturduk. Pipe, PipeTransform arayüzünü implemente eder ve @Pipe dekoratörü ile Angular’a kaydedilir. transform metodu, giriş değerini alır, ilk harfini büyük yapar ve sonucu döndürür. Bu işlem, bileşenin durumunu değiştirmeden gerçekleştirilir, böylece veri immutability korunur.
AppComponent içerisinde, {{ text | capitalize }} ifadesi ile pipe kullanılmaktadır. Saf pipe olduğu için Angular, sadece giriş verisi değiştiğinde pipe’i çalıştırır ve gereksiz yeniden render’ları engeller. Bu yapı, pipe’lerin yeniden kullanılabilir olmasını sağlar ve bileşen şablonlarında temiz, okunabilir bir veri dönüşümü sunar.
Pratik Örnek
typescriptimport { Pipe, PipeTransform } from '@angular/core';
import { Component, OnInit } from '@angular/core';
@Pipe({
name: 'filterByKeyword',
pure: true
})
export class FilterByKeywordPipe implements PipeTransform {
transform(items: string[], keyword: string): string[] {
if (!items || !keyword) return items;
return items.filter(item => item.toLowerCase().includes(keyword.toLowerCase()));
}
}
@Component({
selector: 'app-search-list',
template: ` <h2>Filtrelenebilir Liste</h2> <input [(ngModel)]="searchTerm" placeholder="Anahtar kelime girin"> <ul> <li *ngFor="let item of items | filterByKeyword:searchTerm">{{ item }}</li> </ul>
`
})
export class SearchListComponent implements OnInit {
items: string[] = [];
searchTerm: string = '';
ngOnInit() {
this.items = ['Angular', 'React', 'Vue', 'Svelte', 'Ember'];
}
}FilterByKeywordPipe, bir string dizisini kullanıcı tarafından girilen anahtar kelimeye göre filtreler. Saf pipe olduğu için yalnızca giriş verileri değiştiğinde çalışır ve performansı artırır. SearchListComponent ngOnInit içerisinde verileri başlatır ve *ngFor ile pipe’i uygular. [(ngModel)] ile sağlanan çift yönlü veri bağlama, listeyi anlık olarak günceller.
Bu yaklaşım prop drilling’i engeller, veri immutability’yi korur ve Angular’ın en iyi uygulamalarına uygundur. Özel pipe’ler, filtrelenebilir listeler, dinamik tablolar ve interaktif UI elemanları için ideal bir çözümdür.
Özel pipe’ler için en iyi uygulamalar, pipe’leri saf tutmak, tek bir sorumluluk ilkesi ile oluşturmak ve dönüşüm mantığını şablondan ayırmaktır. Prop drilling, gereksiz render ve veri mutasyonlarından kaçınılmalıdır.
Yaygın hatalar arasında, pipe içinde array veya objeleri değiştirmek, gereksiz şekilde impure pipe kullanmak ve karmaşık mantığı direkt şablona koymak yer alır. Debug için Angular DevTools ve trackBy kullanımı önerilir. Performans optimizasyonu için cache mekanizmaları veya verimli filtreleme teknikleri uygulanabilir. Veri doğrulama ve servis kullanımı, güvenliği artırır ve birim testleri kolaylaştırır.
📊 Referans Tablosu
| Angular Element/Concept | Description | Usage Example |
|---|---|---|
| CapitalizePipe | Bir string’in ilk harfini büyük yapar | {{ 'angular' |
| FilterByKeywordPipe | String dizilerini anahtar kelimeye göre filtreler | *ngFor="let item of items |
| Saf (Pure) Pipe | Giriş değiştiğinde çalışır ve gereksiz render’ı engeller | @Pipe({ name: 'example', pure: true }) |
| Transform Fonksiyonu | Pipe içinde veri dönüşümünü gerçekleştirir | transform(value: string): string { ... } |
| Pipe Dekoratörü | Pipe’i Angular’a kaydeder | @Pipe({ name: 'pipeName' }) |
Özel pipe’ler, veri dönüşümünü bileşen mantığından ayırarak kod okunabilirliğini, yeniden kullanılabilirliği ve performansı artırır. Saf pipe kullanımı, gereksiz hesaplamaları azaltır ve Angular’ın yaşam döngüsü ile entegre çalışır.
Bir sonraki adım olarak, birden fazla parametre alan pipe’ler, impure pipe’ler, servis entegrasyonu ve karmaşık SPA senaryolarında performans optimizasyonu çalışmaları önerilir. Pipe’ler, veri filtreleme, formatlama ve dinamik içerik yönetiminde kritik öneme sahiptir. Angular dokümantasyonu ve topluluk örnekleri, ileri düzey öğrenim için başlıca kaynaklardır.
🧠 Bilginizi Test Edin
Bilginizi Test Edin
Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör
📝 Talimatlar
- Her soruyu dikkatle okuyun
- Her soru için en iyi cevabı seçin
- Quiz'i istediğiniz kadar tekrar alabilirsiniz
- İlerlemeniz üstte gösterilecek