Angular Custom Pipe Ekleme

Bu makalemizde custom pipe eklemekte bahsetcem. Kullanacağımız senaryo uzun kelimelerin kısaltmasını yapıcaz.

Öncelikle cli aracılığı summary adında pipe ekliyoruz.

ng  g pipe summary

Daha sonra oluşan pipe classını ağıdaki gibi geliştirdik.

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

@Pipe(
   { name:'summary'}  // pipe çağırmak verdiğimiz name
)
export class SummaryPipe implements PipeTransform{
    transform(value:string,limit?:number) { 
        if(!value) return null;
        limit=limit?limit:20;
        if(limit>value.length)return value;
        return value.substring(0,limit)+'...';
    }

}

Aşağıdaki gibi bir html’de karakter sınırını belirliyoruz.

<p class="card-text">{{item.description | summary:20}}</p>

oluşan görüntü aşağıdaki gibidir.