במאמר הקודם למדנו על  ראוטינג (Routing) באפליקציית אנגולר, היום נעבור לנושא ה Pipes.

ה-Pipe באנגולר הוא מנגנון המאפשר עיבוד וטרנספורמציה של נתונים ישירות בתבניות (templates). ניתן להשתמש ב-Pipes לשינוי פורמט של תאריכים, מספרים, טקסטים ועוד. במאמר זה נעמיק בשימוש ב-Pipes, נבין כיצד ליצור Pipes מותאמים אישית ונראה דוגמאות פרקטיות.

הבנת Pipes באנגולר

Pipes הם בעצם פונקציות שמבצעות טרנספורמציה של נתונים ישירות ב-HTML של התבנית. לדוגמה, ניתן להשתמש ב-Pipe לעיגול מספר או לשינוי פורמט של תאריך.

שימוש ב-Pipe בסיסי

Angular מגיעה עם מספר Pipes מובנים כמו date, uppercase, lowercase, currency ועוד. הנה דוגמה לשימוש ב-Pipe לעיגול מספר:

<p> {{ 4.5678 | number:'1.0-2' }} </p>

התוצאה תהיה: 4.57

יצירת Pipe מותאם אישית

ניתן ליצור Pipe מותאם אישית אם יש צורך בפעולות מורכבות יותר שלא ניתנות למימוש עם ה-Pipes המובנים. לדוגמה, ניצור Pipe שממיר טקסט לאותיות ראשיות (Title Case).

תחילה, ניצור קובץ בשם `title-case.pipe.ts`:

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

@Pipe({
  name: 'titleCase'
})
export class TitleCasePipe implements PipeTransform {
  transform(value: string): string {
    if (!value) return value;
    return value.replace(/\w\S*/g, (txt) => txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase());
  }
}

שילוב Pipe בתבנית

כעת נוכל להשתמש ב-TitleCasePipe בתבנית שלנו:

<p> {{ 'hello world' | titleCase }} </p>

התוצאה תהיה: Hello World

שימוש ב-Pipe עם פרמטרים

Pipes יכולים לקבל פרמטרים נוספים שמשנים את אופן פעולתם. לדוגמה, נשתמש ב-DatePipe לשינוי פורמט של תאריך:

<p> {{ today | date:'fullDate' }} </p>

התוצאה תהיה: Friday, January 1, 2021

בניית Pipe מורכב

נניח שאנחנו רוצים ליצור Pipe שמקבל פרמטר ומבצע חישוב מורכב. לדוגמה, Pipe שמחשב את שטח מעגל לפי רדיוס:

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

@Pipe({
  name: 'circleArea'
})
export class CircleAreaPipe implements PipeTransform {
  transform(radius: number, pi: number = 3.14): number {
    return pi * Math.pow(radius, 2);
  }
}

שימוש ב-Pipe הזה בתבנית:

<p> {{ 5 | circleArea:3.14 }} </p>

התוצאה תהיה: 78.5

יתרונות השימוש ב-Pipes

– **פשטות וקריאות**: השימוש ב-Pipes הופך את הקוד לקריא ופשוט יותר.

– **חיסכון בזמן**: ה-Pipes מבצעים פעולות נפוצות בצורה מהירה ויעילה.

– **שימוש חוזר**: ניתן להשתמש באותם Pipes במקומות שונים באפליקציה.

מתי להשתמש ב-Pipe?

– כאשר יש צורך בטרנספורמציה של נתונים בתבנית.

– כאשר יש פעולות שחוזרות על עצמן וניתן לייעל אותן בעזרת Pipe.

– כאשר רוצים להפריד לוגיקה של טרנספורמציה מהלוגיקה של הקומפוננטה.

דוגמאות נוספות לשימוש ב-Pipes

פורמט מטבע

שימוש ב-CurrencyPipe לשינוי פורמט של מספר למטבע:

<p> {{ 1234.56 | currency:'USD' }} </p>

התוצאה תהיה: $1,234.56

טרנספורמציה למחרוזת

שימוש ב-UpperCasePipe להמרת טקסט לאותיות גדולות:

<p> {{ 'hello' | uppercase }} </p>

התוצאה תהיה: HELLO

סיכום

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

אם אתם מעוניינים ללמוד בצורה מעמיקה יותר אתם מוזמנים להתייעץ איתנו על קורס אנגולר.

במאמר הבא בסדרה נדבר על הבנת המנגנון Change Detection באנגולר.