Skip to main content

Custom Pipes

אפשר לבנות pipe מתואמים אישית, כך שהמידע שעובר בהם יוצג בדרך שאנחנו רוצים. אנחנו מייצרים פונקציה שתקבל את הערך מתוך ה-html ותחזיר לנו תצוגה שונה.

כדי ליצור את ה-pipe:

ng g p pipes/age

נקבל קובץ שבו אנחנו צריכים לממש את הפונקציה transform של ה-pipe.

ts file
@Pipe({
name: 'age'
})

export class AgePipe implements PipeTransform{
transform(value: any, args?: any): any {
return null;
}
}

נניח שאנחנו רוצים לקבל תאריך ולהציג את הגיל של המשתמש.

html file
{{ user.dob | age }}

ערך ה-value הוא הערך שנמצא לפני ה-pipe ועובר אלינו.

ts file
transform(value: any, args?: any): any {
let currentYear: any = new Date().getFullYear();
let userBirthYear: any = new Date(value).getFullYear();
let userAge = currentYear - userBirthYear;

return userAge;
}