Bazı durumlarda, dahili pipe’lar yeterli olmayabilir. Bu gibi durumlarda, kendi özel pipe’larınızı oluşturabilirsiniz. Şimdi bir customPipe oluşturalım.
Öncelikle yeni bir pipe oluşturmak için Angular CLI’yi kullanalım:
|
1 2 3 |
ng generate pipe custom |
Oluşturulan custom.pipe.ts dosyasını açın:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'custom' }) export class CustomPipe implements PipeTransform { transform(value: any, ...args: any[]): any { // dönüşüm kodunuzu buraya yazın } } |
Metni ters çeviren bir pipe oluşturalım.
|
1 2 3 4 5 |
transform(value: string): string { return value.split('').reverse().join(''); } |
Yani kodumuzun son hali:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'custom' }) export class CustomPipe implements PipeTransform { transform(value: string): string { return value.split('').reverse().join(''); } } |
İlgili Angular modül dosyasına gidin ve CustomPipe’ı import edin sonra declarations dizisine ekleyin.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
import { CustomPipe } from './path-to-your-pipe/custom.pipe'; @NgModule({ declarations: [ // ... diğer bileşenler, direktifler ve pipe'lar CustomPipe ], // ... }) export class YourModuleName { } |
Artık bu modülde tanımlı olan herhangi bir bileşende veya şablonda bu özel pipe’ı kullanabilirsiniz.
Not: Eğer bu pipe’ı birden fazla modülde kullanmayı planlıyorsanız, onu bir SharedModule içerisinde tanıtarak bu SharedModule‘ü gerektiği yerlerde import edebilirsiniz. Bu, kodun tekrar kullanılabilirliğini artırır.
HTML şablonunda bu özel pipe’ı kullanalım:
|
1 2 3 |
{{ 'merhaba' | custom }} |
Çıktı: abahrem
Dahili pipe’lar hızlı dönüşümler için kullanışlıdır, ancak özel ihtiyaçlarınız için kendi özel pipe’larınızı da oluşturabilirsiniz. Öğrenmesi kolaydır ve uygulamalarınıza büyük esneklik katar.
Umarım “Angular Custom Pipe Oluşturma” başlıklı yazım sizin için faydalı olmuştur.
Şu yazılar da ilginizi çekebilir.
Angular Data Binding: Tek Yönlü ve Çift Yönlü Veri Bağlama
Yeni bir yazımda görüşmek üzere.
Happy coding!
