יצירת directive מותאם מייצרת directive שמשנה את הניראות של האלמנט בו הוא נמצא. כדי ליצור directive נריץ ב-CLI את הפקודה: בקובץ ה-directive שנוצר לנו נקבל את האלמנט שממנו הופעל ה-directive ונפעיל עליו את הפעולה. setbackground.directive.ts נשתמש ב-directive שבנינו component.html דוגמא ל-Directive מותאם נראה דוגמא של directive שמשנה את גודל הפונט באלמנט בו הוא מופעל. hightlight.directive.ts […]
נגדיר טופס שבתוכו יהיו הפקדים שבהמשך. בטופס יש שימוש ב-form builder. ליד כל שם פקד יש את סוג הפקד שנשתמש בו בטופס. zimun-torim.component.ts המבנה הבסיסי של דף הטופס הוא כזה: zimun-torim.component.html תיבת טקסט – Input הפקד הכי פשוט הוא תיבת טקסט. נוסיף את הפקד של שם החולה – patientName לטופס. zimun-torim.component.html כפתורי רדיו – Radio […]
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 גם נותנים הוראות לגבי הדרך […]
כשאנחנו מבצעים מעבר בין קומפוננטות יש סדרה של אירועים שמתרחשים. כדי לעקוב אחריהם נאפשר את tracing. app-routing-module.ts עכשיו נוכל לראות ב-log את האירועים. אנחנו יכולים להרשם לאירועים ולבצע פעולות כשהם עולים. למשל להראות אייקון של טעינה כשהעמוד נטען ולהסיר אותו כשהעמוד עלה. app.component.html צריך לשים את הגרפיקה של הספינר כמובן ב-css. app.component.ts
כשאנחנו מקבלים מידע חיצוני, הפעולה יכולה לקחת זמן ובינתיים נטען עמוד ריק. אנחנו רוצים שהעמוד לא יטען עד שלא יהיה בו כל המידע הנדרש. יצירת ה-resolver: פונקצית ה-resolve מחזירה מידע. אנחנו רוצים את המידע הזה לפני שהעמוד נטען. נקח את ה-service שאיתו אנחנו שולפים את המידע ונקבל את המידע בתוך ה-resolve. user.service.ts users.resolver את ה-resolver […]
ה-guard CanDeactivate משמש לשליטה של מי שיכול לצאת מעמוד. נניח שיש לנו מישהו שממלא טופס ורוצה לצאת באמצע בלי שהוא שמר את הנתונים. עם CanDeactivate אנחנו יכולים לתת לו הודעה לפני שהוא יוצא מהעמוד. יצירת ה-guard: contact-form.gourd.ts אנחנו רוצים להשתמש בפונקציה deactivate על קומפוננטת contact ולכן נכניס אותה לערגים שהפונקציה מקבלת. contact-form.gourd.ts נכניס את ה-guard […]