Angular Pipe Oluşturma

Merhaba arkadaşlar, bu yazımda sizlere Angular Pipe Oluşturma konusundan bahsedeceğim.

Angular‘da bulunan hazır Pipe‘ların kullanımını bir önceki yazımızda gerçekleştirmiştik. Bu yazımızda da kendi ihtiyacımız doğrultusunda Custom bir Pipe oluşturup kullanacağız.

Angular’da pipe nasıl oluşturulur?

İstersek bunu Angular CLI üzerinden sağlayabiliriz ya da yeni bir dosya ekleyerek tipini …pipe.ts şeklinde yazdığımızda ve içerisinde oluşturacağımız class PipeTransform‘dan miras alındığında ve PipeDecorator eklemesini yaptığımızda ve de son olarak transform metodumuzun içerisini doldurduğumuzda başarılı bir şekilde oluşturmuş oluruz.

Angular CLI üzerinden Pipe oluşturmak için aşağıdaki komutu kullanabiliriz.

ng generate pipe custom-currency

Custom oluşturduğumuz bir Pipe örneği:

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

@Pipe({
  name: 'customCurrency',
})
export class CustomCurrencyPipe implements PipeTransform {
  transform(value: any, args?: any): any {
    return `${value} Türk Lirası`;
  }
}

Yukarıda oluşturmuş olduğumuz CustomPipe‘ı kullanabilmek için app.module.ts içerisinde bulunan declarations kısmında bu Pipe dosyamızı eklememiz gerekmektedir. Eklemezsek eğer kullanım sırasında hata alırız.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { CustomCurrencyPipe } from './pipes/custom-currency.pipe';

@NgModule({
  imports: [BrowserModule, FormsModule],
  declarations: [AppComponent, CustomCurrencyPipe],
  bootstrap: [AppComponent],
})
export class AppModule {}

Şimdi Html tarafında oluşturduğumuz bu Pipe’ı kullanabiliriz.

<p>
  {{ '5.00' | customCurrency }}
</p>

Umarım faydalı olur.

Bir sonraki yazıda görüşmek üzere…