Angular Custom Pipe Yazımı

Herkese Merhaba!

Bu yazıda kendi istediğimizi yapan bir pipe nasıl yazılır onu anlatacağım.

İstediğimiz konuma xyz123.pipe.ts dosyasını oluşturup;

export class xyz123 implements PipeTransform {}

şeklinde bir class oluşturalım.

Main module dosyamıza import ettiğimiz bir utilities modülümüz var ise utilities modülünün içine, yok ise main module dosyasına oluşturduğumuz pipe dosyasını import edelim.

import { xyz123 } from './xyz123.pipe';

@NgModule({

    imports: [
        CommonModule
    ],
    providers: [  ],
    declarations: [
        xyz123 
    ],
    exports: [
        xyz123 
    ]
})

(Typescript dosyamızda bu pipe'ımızı kullanmak istiyorsak pipe class'ımızı modülümüzdeki providers kısmına da eklememiz gerekmektedir.)

Oluşturduğumuz xyz123.pipe.ts dosyamıza geri dönelim. Pipe'ı baz alan importumuzu yapalım ve Pipe olduğunu dışarıya belli edip yapmasını istediğimiz kodu yazalım.

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

@Pipe({
    name: 'xyzPipe'
})

export class xyz123 implements PipeTransform {

    transform(value: any, args?: any): any {

        let firstDigit = value.match(/\d/); // metindeki ilk sayıyı(digit'i) bulur
        let index = value.indexOf(firstDigit); // sayının indexini verir
        return value.substring(0, index) + ' ' + value.substring(index); //metnin arasına bir boşluk ekleyip return eder
   }
}

Şimdi html dosyamıza dönüp pipe'ımızı kullanalım.

 {{ 'istediğim yazı ve sonuna boşluksuz rakamlar123' | xyzPipe }}

Çıktı:        "'istediğim yazı ve sonuna boşluksuz rakamlar 123"

Bu yazdığımız pipe'a göre metindeki ilk rakamı bulup bir öncesine boşluk ekledik. Metodumuzun içinde bu olayı istediğimiz gibi yazabiliriz.