יש מספר פאייפים שמגיעים כברירת מחדל בפרויקט אנגולר כמו :
- async
- json
- uppercase
- currency
- slice
- date
ועוד מספר פאייפים נוספים.
היתרון המאוד גדול שלהם הוא:
הם לא משנים את המידע במשתנה אלא לוקחים את המידע "מעתיקים" אותו, משנים אותו ומחזירים אותו לאחר שינוי.
זה אומר, שניתן להשתמש במידע לאורך ה-html ולהעביר אותו דרך פאייפים שונים בידיעה שהם לא יפריעו אחד לשני.
עכשיו לחלק המעניין,
איך בונים פאיפ כזה בעצמנו?
הסבירות היא מאוד גדולה שבשלב מסויים נרצה לעשות את הפעולה הזאת, מהסיבה שהאופציות שניתנות כברירת מחדל בדרך כלל למכסות את כל האופציות או לא מתאימות לגמרי למה שאנחנו רוצים.
בואו נבנה פאיפ שיוסיף למספר רגיל הפרדה של פסיקים כל 3 ספרות.
בפרויקט שלנו, הדף שמציג את המידע הוא home שנמצא בספרית pages
הפאיפ שלנו נקרא בשם commasSeparation והוא נמצא בתוך ספריה בשם pipes.
pipes ו-pages נמצאות באותה רמה, זאת אומרת שהן באותה ספריה ששמה app
נפתח טרמינל בספריה pages ונקליד את הפקודה הבאה:
ng g c home
לאחר מכל נלך לספריה pipes ונקליד את הפקודה הבאה:
ng g p commas-separation
עכשיו נוסיף ונערוך את הקבצים כך:
<span>{{bigNumber|commasSeparation}}</span> <ul> <li *ngFor="let n of bigNumberArr"> <span>{{n|commasSeparation}}</span> </li> </ul>
export class HomeComponent implements OnInit { bigNumber: number = 1234567890; bigNumberArr: number[] = [123456789, 12345678, 1234567, 123456, 12345, 1234, 123, 12, 1] constructor() { } ngOnInit(): void { } }
הפאיפ
transform(value: number, ...args: unknown[]): string { return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); }
בתוך הפאיפ אפשר לכתוב כל פונקציה שרוצים ורק לדאוג לבצע return בסוף של המידע לאחר השינויים, במקרה הזה, השתמשתי ב-regex.
value = המידע שנכנס, אשר עליו אנחנו רוצים לעבוד.
args = מידע נוסף אשר על פיו אנחנו רוצים לשנות את value, כמו בתאריך, לפאיפ של תאריך – date אנחנו יכולים להוסיף גם איך אנחנו רוצים שהוא יחזיר את מבנה התאריך 'dd-mm-yyyyy' וכו'.
במקרה שלנו, אנחנו לא צריכים ערכים נוספים ולכן אין שימוש וצורך ב-args והוא מסוג unknown.
ברכיב הבית שלנו יש לנו 2 משתנים, אחד הוא מסוג מספר ואחד מסוג מערך כאשר בכל אחד מהמספרים יש פחות סיפרה אחת.
אלו התוצאות:
1,234,567,890 123,456,789 12,345,678 1,234,567 123,456 12,345 1,234 123 12 1