אם אנחנו רוצים להשתמש ב-service בכמה קומפוננטות, במקום להחזיק את הערך בנפרד בכל קומפוננטה, אחננו יכולים רק להסתכל על הערך שמוחזק לנו ב-service. המשתנה counter$ הוא Observable. count.service.ts הוא לא משתנה אמיתי, אלא רק stream של מידע, לכן מסמנים אותו עם $. app.component.ts בדף נשתמש ב-pipe async כדי להציג את הערך. app.component.html ה-pipe עושה לנו […]
דוגמא לקשר בין קומפוננטות על ידי services. נקרא לקומפוננטה all-users כדי להציג את רשימת המשתמשים. app.component.html את הקומפוננטה של המשתמשים נחבר ל-service של users. all-users.component.ts בדף נציג את רשימת המשתמשים. יש עמודה של שם, של תפקיד וכפתור שמציג בצד את הפרטים של המשתמש. לחיצה על הכפתור תפנה לקומפוננטה user-detail לבצגת הפרטים. לחיצה על הכפתור קוראת […]
אובייקט Subscription יכול לאסוף הרבה נרשמים וליצור בעיה של זיכרון. אפשר לקחת את הנרשמים ולהסיר את ההרשמה שלהם. counter.component.ts עכשיו, כשהקומפוננטה מסיימת את החיים שלה, גם ההרשמה מסתיימת.
אם אנחנו רוצים לשתף מידע בין קומפוננטות שונות, אנחנו יכולים להשתמש בפונקציות של ה-service. בתצוגה יש לנו מונה פשוט עם כפתורי +-. counter.component.html ב-class אנחנו יוצרים מונה עם ערך ראשוני של 0 וקוראים לפונקציות של פלוס ומינוס. הפונקציות האלה קוראות לפונקציות המתאימות ב-service. counter.component.ts הפונקציות של ה-service משנות את הערך של המונה הגלובלי. counter.service.ts שימוש […]
יצירת service השירות הזה אחראי על אספקת הנתונים. employee.service.ts ב-class שאנחנו רוצים להשתמש בו נכין משתנה שיקלוט את הנתונים. במקרה הזה, זאת הקומפוננטה של רשימת העובדים. employee-list.component.ts נוכל ליצור גם בקומפוננטה אחרת את המשתנה שיקלוט את רשימת העובדים. employee-detail.component.ts אנחנו צריכים לרשום את השירות אחרת הוא ישמש כפונקציה רגילה. הכי טוב לעשות את זה ב-app.module […]
למה משמש service באנגולר Service הוא class רב פעמי ואפשר להשתמש בפונקציות או במשתנים שלו במספר קומפוננטות. אם יש לנו מידע שאנחנו צריכים בכמה קומפוננטות, נוכל להשתמש ב-service על מנת לקבל את המידע ולספק אותו לקומפוננטות הרצויות. נסתכל על מבנה הקבצים הבא: אנחנו קוראים לקומפוננטה של רשימת העובדים. app.html ב-class יש לנו את רשימת העובדים […]
אפשר לשנות את הדרך שבה מוצג המידע בדף ה-html. Built-in Pipes נגדיר משתנים לדוגמא: ts file נראה את הניתובים של המידע html file Custom Pipes אפשר לבנות pipe מתואמים אישית, כך שהמידע שעובר בהם יוצג בדרך שאנחנו רוצים. אנחנו מייצרים פונקציה שתקבל את הערך מתוך ה-html ותחזיר לנו תצוגה שונה. כדי ליצור את ה-pipe: נקבל […]
Parent to child הצהרה על המשתנה בקומפוננטה של ה-parent. Parent ts file שליחת המשתנה ל-child כשקוראים לקומפוננטה של ה-child לתוך משתנה parentData של ה-child. Parent html file קבלת הערך של המשתנה על ידי הגדרת המשתנה כ-Input ב-child. Child ts file שימוש בערך שקבלנו ב-child בתוך הקומפוננטה של ה-child. Child html file דוגמא של filter תאור יש […]
תנאים ולולאות משפיעים על הדרך שבה אנחנו רואים את התוכן בתבנית. על מנת להשפיע על מבנה הדף נשתמש ב-directives. ngIf מציגים את האלמנט רק אם התנאי נכון. component html file אפשר להשתמש בערכים של משתנים על מנת להעריך את התנאי: אפשר להשתמש באפשרות של else כדי לתת תבנית אלטרנטיבית במקרה שהתנאי לא מתקיים: אפשר להשתמש […]
הפעלת אירוע מתוך ה-template כדי להעביר מידע מה-class ל-template אנחנו משתמשים ב-properties. משתנים שמוגדרים ב-class וזמינים לנו לשימוש ב-template. מה קורה כשרוצים להעביר מידע בכיוון ההפוך, מה-template ל-class? משתמשים באירועים. טריגר של אירוע מתוך התבנית: קוראים לאירוע ה-click שמפעיל את הפונקציה onClick שנמצאת ב-class. html file בקובץ ה-class אפשר לבצע פעולות בתוך הפונקציה. ts file […]