@HostListner @HostListner decorator מקשיב לאירועים מה-DOM של האלמנט ומגיב לאירוע על ידי ביצוע של event handler. בדוגמא נראה איך גורמים ל-div לשנות את המרווחים שלו עם טרנזקציה כשמבוצעת פעולת hover. הפונקציה נעבוד על האלמנט "המארח", כלומר זה שקרא ל-directive. כשהאירוע mouseenter יקרה באלמנט המארח, הפונקציה onmouseover תתבצע. בתוך אותו ה-directive אנחנו יכולים להאזין לאירועים נוספים, […]

יצירת directive מותאם מייצרת directive שמשנה את הניראות של האלמנט בו הוא נמצא. כדי ליצור directive נריץ ב-CLI את הפקודה: בקובץ ה-directive שנוצר לנו נקבל את האלמנט שממנו הופעל ה-directive ונפעיל עליו את הפעולה. setbackground.directive.ts נשתמש ב-directive שבנינו component.html דוגמא ל-Directive מותאם נראה דוגמא של directive שמשנה את גודל הפונט באלמנט בו הוא מופעל. hightlight.directive.ts […]

ngClass הוא Attribute directive. זה אומר שהוא שנה את הניראות של אלמנט html שמשתמש בו. ngClass משמש להוספה דינמית של css class לאלמנט html. בדוגמא ה-class של text-success יופיע ב-div רק במקרה של על true. component.html דוגמא ל-ngClass נניח שיש לנו alert בעמוד שנעלם כשלוחצים על ה-X. אנחנו רוצים אפקט של fade כשה-alert יעלם. component.html […]

ngIf הוא directive מבני. מה שאומר שהוא משנה את ה-DOM על ידי הוספה או הסרה של אלמנטים ממנו. ngIf מוסיף או מוריד אלמנטים על פי תנאי מסויים. הוא יהיה מחובר לביטוי שיגיע מתוך ה-ts שיחזיר true או false. אם הערך שחזר הוא true, האלמנט יתווסף לעמוד, אם הערך שחזר הוא false האלמנט יוסר. בדוגמא נראה […]

ngStyle הוא Attribute directive. מה שאומר שהוא משנה את המראה או ההתנהגות של אלמנט html. הוא לא מוסיף אלמנטים ל-DOM. אנחנו משתמשים ב-ngStyle על מנת להוסיף או להסיר class של css דינמית מאלמנט html על פי ערך של משתנה. שימושים ל-ngStyle​ דוגמאות לצורך ב-ngStyle: דוגמא עם ngStyle נניח שיש לנו רשימה של מוצרים ואנחנו רוצים […]

ngFor הוא directive מובנה באנגולר. אנחנו משתמשים בו כדי לעבור בלולאה על משתנה איטרטיבי ובכל סיבוב של הלולאה אנחנו מוסיפים קוד html לעמוד. ngFor הוא Structural directive, מה שאומר שהוא משנה את ה-DOM על ידי הוספה או הורדה של אלמנטים מהעמוד. כשאנחנו קוראים ל-Structural directive נשתמש ב-* לפני שם ה-directive. דוגמא לשימוש ב-ngFor נניח שיש […]

אבני הבניין הבסיסיות של אנגולר הם קומפוננטות. בקומפוננטות יש לנו העברת מידע בין ה-class לבין התצוגה על ידי binding של המידע. יש עוד רכיב שבונה את אפליקציית האנגולר וזה directive. Directive הוא פשוט הוראה ל-DOM. אנחנו משתמשים ב-directive כדי להגיד ל-DOM איזה רכיב להוסיף למבנה ה-HTML שלנו ואיזה לא. ה-directive גם נותנים הוראות לגבי הדרך […]