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.
