Custom pipe in angular

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

• 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

פוסטים קשורים:

שימוש יעיל ב async pipe – אנגולר angular input and output in the same variable צורות שונות לקריאה של קומפוננטות אנגולר (angular selector types) custom validator for groups – אנגולר ולידטור ייחודי לגרופ ב-reactive form