אבני הבניין הבסיסיות של אנגולר הם קומפוננטות. בקומפוננטות יש לנו העברת מידע בין ה-class לבין התצוגה על ידי binding של המידע.
יש עוד רכיב שבונה את אפליקציית האנגולר וזה directive.
Directive הוא פשוט הוראה ל-DOM. אנחנו משתמשים ב-directive כדי להגיד ל-DOM איזה רכיב להוסיף למבנה ה-HTML שלנו ואיזה לא. ה-directive גם נותנים הוראות לגבי הדרך שבה אלמנט HTML יהיה מוצג.
כשאנחנו שמים סלקטור של קומפוננטה בתוך העמוד שלנו, אנחנו בעצם אומרים לאפליקציה איזה תצוגה לשים שם, קוד ה-Html ואיזה לוגיקה יש מאחורי זה, קוד ה-ts.
אפשר להסתכל על קומפוננטות כ-directive שיש להם טמפלט.
בדרך כלל נוסיף directive בתוך אלמנט html, אבל אפשר להוסיף אותם גם כ-css או כאלמנט html.
<div changeDivGreen>This is the div</div>
כמו קומפוננטה, directive הוא class של TypeScript שיש לה decorator של @Directive.
Built -in Directive
אנחנו יכולים לבנות directive משלנו אבל אנגולר גם מספקת לנו directive מובנים כמו ngIf, ngFor, ngClass ואחרים.
סוגים של directive
אפשר לחלק directive לשני סוגים.
- Structural directive – הם directive מבניים, משנים את ה-DOM על ידי הוספה או הסרה של אלמנטים מהעמוד.
- Attribute directive – משמשים כתכונה של האלמנט ומשנים את המראה וההתנהגות של האלמנט.
בפרק של קומפוננטות כתבתי על directive, אבל כאן נראה את הנושא בצורה מקיפה יותר.