Özel pipe oluşturma

Veri dönüştürme ihtiyaçlarınıza uygun özel pipe'lar oluşturabilirsiniz.

Bu aktivitede, özel bir pipe oluşturacak ve şablonunuzda kullanacaksınız.

Bir pipe, @Pipe dekoratörüne sahip bir TypeScript sınıfıdır. İşte bir örnek:

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

@Pipe({
  name: 'star',
})
export class StarPipe implements PipeTransform {
  transform(value: string): string {
    return `⭐️ ${value} ⭐️`;
  }
}

StarPipe bir string değer kabul eder ve o string'i etrafına yıldızlar ekleyerek döndürür. Şunlara dikkat edin:

• @Pipe dekoratör yapılandırmasındaki name, şablonda kullanılacak olan addır
• transform fonksiyonu, mantığınızı koyacağınız yerdir

Pekala, deneme sırası sizde - ReversePipe'ı oluşturacaksınız:

1. ReversePipe'ı oluşturun

   reverse.pipe.ts dosyasında ReversePipe sınıfına @Pipe dekoratörünü ekleyin ve aşağıdaki yapılandırmayı sağlayın:

   @Pipe({
     name: 'reverse'
   })

2. transform fonksiyonunu uygulayın

   Artık ReversePipe sınıfı bir pipe. Ters çevirme mantığını eklemek için transform fonksiyonunu güncelleyin:

   export class ReversePipe implements PipeTransform {
     transform(value: string): string {
       let reverse = '';
   
       for (let i = value.length - 1; i >= 0; i--) {
         reverse += value[i];
       }
   
       return reverse;
     }
   }

3. Şablonda ReversePipe'ı kullanın

Pipe mantığı uygulandığına göre, son adım onu şablonda kullanmaktır. app.ts dosyasında pipe'ı şablona dahil edin ve bileşen imports dizisine ekleyin:

@Component({
  ...
  template: `Reverse Machine: {{ word | reverse }}`
  imports: [ReversePipe]
})

Ve bununla birlikte başardınız. Bu aktiviteyi tamamladığınız için tebrikler. Artık pipe'ları nasıl kullanacağınızı ve hatta kendi özel pipe'larınızı nasıl oluşturacağınızı biliyorsunuz.