משיכת מידע מ-API באנגולר מתבצע ע"י HttpClientModule. לפני שמתחילים לעבוד צריך להוסיף את HttpClientModule למודול הראשי ולרשימת הייבוא. ב-service עצמו שבו אנחנו מושכים את המידע נייבא את HttpClient ונכניס אותו כ-dependency ל-constructor. אפשר להשתמש בפונקציות שמושכות את המידע מה-API התוך ה-class של הקומפוננטה עצמה, אבל מקובל לבנות קובץ service שמטפל בכל העבודה מול ה-DB וכך […]
@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 […]
נגדיר טופס שבתוכו יהיו הפקדים שבהמשך. בטופס יש שימוש ב-form builder. ליד כל שם פקד יש את סוג הפקד שנשתמש בו בטופס. zimun-torim.component.ts המבנה הבסיסי של דף הטופס הוא כזה: zimun-torim.component.html תיבת טקסט – Input הפקד הכי פשוט הוא תיבת טקסט. נוסיף את הפקד של שם החולה – patientName לטופס. zimun-torim.component.html כפתורי רדיו – Radio […]
כתבנו class פשוט בצורה הזאת: Product.cs זאת לא הצורה המיטבית לכתוב את ה-class. יכול להיות שאני לא ארצה לחשוף ל-client את כל השדות של ה-class. את חלק מהשדות אני ארצה להציג ב-client אחרי מניפולציה, ולא כדאי להעמיס את ה-class עם כל השדות האלה. אנחנו נבצע מיפוי בין האובייקטים שישבו בתוך המערכת לבין אלה שהולכים ל-client, […]
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 האלמנט יוסר. בדוגמא נראה […]