לפעמים יש לנו מצב של טופס שפרוס על פני כמה עמודים, צעדים של מילוי טופס. אנחנו רוצים את אותו הטופס לאורך כל התהליך. אפשר לעשות את זה עם form control. הגדרת הטופס הראשי בעמוד הראשי שמכיל את הניווט לשאר העמודים ואת ה-router-outlet נגדיר את הטופס. קובץ span-form.component.ts קובץ span-form.component.html התבנית של העמוד מחזיקה את כפתורי […]
יצירת פרוייקט חדש ניצור פרוייקט חדש. נתקין את bootstrap כדי שיהיה קל יותר לעצב את הדפים. יצירת מודול לפוסטים וקומפוננטות מתאימות יצירת routes src/app/post/post-routing.module.ts יצירת מודל הפוסט כדי לקבל את המידע בצורה של פוסטים ניצור interface שיחזיק את המידע הזה. src/app/post/post.ts יצירת ה-service src/app/post/post.service.ts הוספת הלוגיקה והטמפלט של הקומפוננטה בקובץ הראשי נקבל את כל רשימת […]
כדי לעדכן מידע ב-DB אנחנו משתמשים בפונקציית put. נוסיף לטבלת הפוסטים שלנו כפתור ששולח לפעולת העדכון. פעולת עדכון תתבצע בדרך כלל מתוך טופס, הטופס שמשמש להכנסת תוכן חדש יכול לשמש גם לעדכון הפוסט. כל מה שצריך לעשות זה רק להוסיף לתוכן השדות את מה שכבר קיים באובייקט. השלבים יהיו: app.component.html בקומפוננטת העריכה נקרא לפונקציה שמגיבה […]
ביטול item אחד פונקציית delete תבטל מידע מתוך ה-DB. נוסיף בכל שורת מידע שיש לנו כפתור כדי לבטל את הפוסט. הכפתור הזה יוביל לפונקציית הביטול שמוגדרת בקומפוננטה. app.component.html נגדיר את פונקציית ה-delete ב-service. posts.service.ts בקובץ הקומפוננטה נקרא לפונקציית הביטול של ה-service מתוך פונקציית הלחיצה על הביטול בטבלה. app.component.ts ביטול כל ה-items אם אנחנו רוצים לבטל […]
קבלת כל ה-items פונקציית get מביאה מידע מתוך ה-DB. נגדיר את מבנה הפוסטים שלנו: post.model.ts נקרא לפונקציית ה-get שמביאה את כל הפוסטים הקיימים דרך ה-service. הפונקציה מחזירה לנו מערך של אובייקטים מסוג Post. posts.service.ts בקומפוננטה, כדי לטעון את המידע כשהדף נטען, נקרא לפונקציית ה-get מתוך ngOnInit. app.component.ts אחרי שיש לנו את המידע אפשר להציג אותו […]
ב-Post Request נשתמש בדרך כלל כשאנחנו רוצים להוסיף מידע לתוך ה-DB. כדי להוסיף ערכים ב-DB אנחנו בדרך כלל משתמשים בטפסים. בדוגמא נשתמש ב-template forms ובהכנסה של פוסטים לרשימה. לכל שדה נשים name ואת ngModel. app.component.html נגדיר את מבנה הפוסטים שלנו: post.model.ts נשתמש בקובץ service על מנת לשלוח את הקריאה ל-API. פונקציית ה-callback מחזירה את הערך […]
התקנה כדי לתרגל עבודה עם DB אפשר להתקין JSON Server מקומית באנגולר. פעולת ההתקנה של הספרייה: כדי להתחיל לעבוד צריך ליצור קובץ json.db ולשים בו מידע התחלתי. השלב הבא הוא להתחיל את הסרבר שמגיש את המידע. כדאי לפתוח טרמינל חדש ולהפעיל בו את הסרבר. את הסרבר צריך לפתוח מתוך התיקייה שבה יש את קובץ ה-json. […]
משיכת מידע מ-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 […]