בכל פעם שיש לנו תפריט אנחנו יכולים לשים מתחתיו את ה-router-outlet שמתאים לו כדי להציג את התוכן של הקומפוננטות. לפעמים אנחנו רוצים מקומות שונים כדי להציג קומפוננטות בקפליקציה. אנחנו יכולים לתת שם לrouter-outlet ולכוון את הכתובות שיגיעו ל-outlet שאנחנו רוצים. ה-router-outlet בלי שם יהיה העיקרי והשאר יהיו משניים. נניח שיש לנו עמוד אודות. אנחנו רוצים […]
נתיבי Child או nested routes הם נתיבים שנמצאים בתוך נתיבים אחרים. כתובת הבסיס שלהם תהיה הכתובת של נתיב הבסיס ואחריו יבוא החלק של הקישור שמתוא להם. נניח שיש לי רשימה של משתמשים, אני נכנסת לתוך פרופיל של משתמש ספציפי. עכשיו למשתמש הזה יש לי קומפוננטה של פרטים אישיים וקומפוננטה של פרטי החברה שבה הוא עובד. […]
כשיש לנו רשימה של מוצרים/משתמשים וכו' ואנחנו רוצים להכנס לתוך ערך אחד, אנחנו צריכים פרמטר שיגיד לנו באיזה מוצר אנחנו נמצאים. הכתובת נבנית באופן אוטומטי ונראית משהו כמו: url/courses/course/103 במודול שבו נמצאים ה-routes אנחנו מוסיפים את הנתיב למוצר שלנו. app.module.ts כדי לקבל את ה-id אנחנו יכולים להשתמש ב-activated route. course.component.ts עכשיו אפשר לפנות ל-service ולמצוא […]
ה-routing מאפשר לנו ניווט באפליקציה. באופן בסיסי יש 3 שלבים ליצירת routing. app.module.ts אחרי שייצרנו את ה-routes צריך לשים אותם בקובץ ה-html. במבנה של העמוד הזה יש לנו את החלק העליון שהוא ניווט לעמודים המתאימים ואז את router-outlet שמכיל את התוכן של הקומפוננטה שאליה אנחנו מנווטים. app.component.html כדי לסמן את הכתובת של הקישור משתמשים ב-routerLink במקום ב-href. כדי […]
נניח שיש לנו טופס שבו מכניסים פרטים אישיים ואנחנו רוצים שהמשתמש יכניס את שמות הילדים שלו. בהתחלה יופיע שדה אחד, והמשתמש יוכל להוסיף שדות כמספר שהוא צריך על ידי לחיצה על כפתור. user.component.ts אפשר גם ליצור קבוצה ולא רק פקד אחד. user.component.ts הוספת ילד חדש: user.component.ts הורדת שדה של ילד: user.component.ts נסדר את הטופס בטמפלט. […]
בלי Form builder, לכל שדה שאנחנו מגדירים צריכים להשתמש במילה new. comp.ts עם Form builder ההגדרה של הטופס נקייה יותר. comp.ts כדי להשתמש ב-Form builder צריך לייבוא לתוך ה-app.module את הספרייה: comp.ts ולהוסיף אותה ל-import. שדה select כדי להוסיף שדה sekect עם ערכים בתוכו נגדיר את השדה בטופס שלנו: comp.ts בטופס עצמו: comp.html לבדיקת הסטטוס […]
כשעושים ולידציה לשדה בטופס מקבלים קוד שאומר האם הולידציה עברה או נכשלה. הקוד הזה נמצא בתוך fieldName.errors. כל ולידציה היא פונקציה שמקבלת control: AbstractControl ומחזירה ValidationErrors | null. נניח שאנחנו רוצים לעשות ולידציה לשם משתמש כך שהוא מחרוזת ללא רווחים. בתוך הקומפוננטה נשים את הפונקציה של הולידציה. comp.ts בהגדרת שדות הטופס, נחבר את פונקצית הולידציה. comp.ts בטמפלט נשתמש […]
Reactive Forms נותנים לנו אפשרות שליטה גדולה יותר וגמישות בבניית טפסים. מבנה הטופס מוגדר בתוך קובץ ה-ts. כדי להשתמש ב-reactive forms צריך לייבא אותם ל-app module. app.module.ts הגדרת טופס Reactive Form גם לקומפוננטה צריכים לייבא את רכיבי הטפסים. formComponent.ts אפשר גם לתת ערך ברירת מחדל לשדה בטופס. formComponent.ts Form disable אפשר להגדיר שדה כ-disabled. אחרי […]
סוגי טפסים טפסים משמשים לקליטת מידע מהמשתמש ולחיבור של מידע ל-DB. Template driven forms בטפסים מבוססי תבנית רוב העבודה מתבצעת בקובץ ה-html. מתאים לטפסים יחסית קצרים בלי לוגיקה מורכבת. Reactive form רוב העבודה מתבצעת ב-class כמו ולידציה, איתור שגיאות וכו' כשאנחנו מושכים מידע מ-DB רצף העבודה יהיה: Template -> Class -> Service -> Database. Template […]
ניצור קומפוננטת חיפוש ללא כפתור. הקומפוננטה מציגה תיבת טקסט שבה מכניסים את ערך החיפוש. search.component.html קודם נציג ל-console את הערך של החיפוש שמקבלים מתיבת הטקסט. search.component.ts עם הקוד הזה אנחנו מחפשים כל פעם כשנכנסת אות, אנחנו רוצים לחפש רק כשיש צורך, כלומר שמפסיקה ההקלדה. נגדיר subject שיזרוק לנו את האירוע של ההקלדה. search.component.ts נשתמש ב-filter […]