כל הפוסטים באנגולר
Nested routing in angular standalone component
זוכרים איך באנגולר היינו מושכים מודול שלם, הוא היה מושך את הראוטים הנוספים ועוד הרבה רכיבים, אבל המשיכה הייתה רק
העברה של מידע נסתר בניווט אנגולר
נראה איך להעביר מידע בזמן ניווט בין רכיבים אבל המידע יהיה נסתר ולא ניתן לראות אותו ב-URL או ב-DOM. עם
מדריך angular standalone component חלק 1
תשכחו כל מה שידעתם על אנגולר! טוב לא באמת, אבל ברגע שעוברים לעבודה עם פרויקט מבוסס רכיבים אוטונומים בלבד, יש
מדריך אנימציות באנגולר – angular animation
כמפתח פרונט אנד שיודע לכתוב אנימציות בCSS וגם בJS, ורוצה לגשת לכתוב אנימציות באנגולר, יופתע וגם לא מעט, כי אנגולר
קורס front end – שפות שחשוב לדעת היטב ושפות שצריך להכיר
בפוסט הקודם כבר נגענו בקוד וגם הצגתי דוגמאות מתוך פרויקט אנגולר שאני מאמין שרבים מכם מכירים. ובעקבות כך אני רוצה
קורס front end – שלבים הראשונים בלכתוב קוד כמו שצריך
כותרת לא אמינה לפוסט הזה אבל זה מה שמצאתי לנכון אז סליחה מראש, בכל מקרה, לכתוב קוד כמו שצריך זה
נסיוני האישי בראיונות עבודה כמתכנת פרונטאנד
אחד הפוסטים שכבר זמן רב שאני רוצה להוציא לאור. כאחד מבין מתכנתי הפרואנט אנד בישראל גם אני נתקלתי בתהליך הסזיפי
איך לשנות ערכת נושא (Theme) – dark/light mode
נכיר מה זה css variables, נקים שירות באנגולר ו-2 ערכות נושא, אחת בהירה והשניה כהה. בשירות נקים פונקציה שתעבור ל-theme
Angular Microfrontend Module Federation Tutorial – Part 6
מי שהתקין את הגירסה החדשה של module federation , יש מספר הבדלים מהגירסה שהראתי כאן. לא משמעותי, אבל נעבור עליהם
Angular Microfrontend Module Federation Tutorial – Part 5
נראה איך לשלוח מידע בין מיקרו פרונטאנדים שונים ע"י אירוע מיוחד שמסוגל להעביר מידע ע"פ אוביקט שאנחנו ניתן לו. נעביר
Angular Microfrontend Module Federation Tutorial – Part 4
בחלק הזה נראה איך לשפר את הדיירקטיב שלנו, שידע להתמודד עם רכיב ועם מודול שלם, בנוסף, ידע למשוך גם תלויות
Angular Microfrontend Module Federation Tutorial – Part 3
ניצור directive שידע להתמודד עם משיכה של רכיב ממיקרו פרונטאנד אחר, יעבד אותו ויחזיר את הרכיב בתצורה מתאימה לאנגולר ול-html.
יסודות האנגולר- angular lifecycle and change detection
הכל מתחיל בפקודת ng s . הקסם מתרחש , המנוע של אנגולר מתחיל לעבוד ופתאום יש לנו אפליקציה עם שלום
Angular Microfrontend Module Federation Tutorial – Part 2
נראה איך ליצור מודול במיקרו אתר ולמשוך אותו מהאתר הראשי על ידי lazy loading modules routing, נעבור בקצרה על נקודות
Angular Microfrontend Module Federation Tutorial – Part 1
נפתח 3 פרויקטים, אחד מעטפת ועוד 2 שימשכו לתוך המעטפת במספר צורות שונות, החלק הזה נראה איך להתקין ומה המשמעות
Chat – angular, nodejs and socket.io
נבנה צ'ט בעזרת socket.io ונראה איך לממש אותו בצד השרת nodejs ובצד הלקוח angular. נעבור על השורות החשובות ונראה את
Angular nested routes
צורת כתיבה של ניתובים בתוך ניתובים, מעבר מהיר על תצורת כתיבה של ניתוב רגיל וניתוב שנמצא בתוך ניתוב אחר ונראות
מדריך הטמעה של SVG כחלק מקוד פרויקט באנגולר
נראה איך אפשר להטמיע SVG כחלק מהפרויקט, ליצא אותם ולמשוך אותם ברכיבים של אנגולר. בנוסף נראה איך עוברים את המערכת
convert array of objects to formArray in angular reactive form
קרה לכם שרציתם להעביר מערך של מידע שהגיע מהשרת למערך של רכיבים בתוך טופס כדי שהמשתמש יוכל לשנות אותם ולשלוח
רכיבים: בניה של רכיב אקורדיון ברקורסיה נגיש באנגולר
נראה איך רכיב אקורדיון יכול להכיל את עצמו אין סוף פעמים על פי המידע שהוא מקבל, בהתאמה נבנה interface שגם
רכיבים: בניה של רכיב לוח שנה נגיש באנגולר
יצירה של רכיב לוח שנה נגיש באנגולר אשר יכול גם לקבל ארועים על פני מספר ימים בחודש. נעבור על הבניה
רכיבים: בניה של רכיב MULTI-SELECT נגיש באנגולר
נראה איך לבנות רכיב MULTI SELECT, נבנה אותו נגיש עבור מקלדת וקוראי מסך, נעבור על הפונקציות שחייבים לממש . לבסוף
רכיבים: בניה של רכיב AUTOCOMPLETE נגיש באנגולר
נראה איך לבנות רכיב AUTOCOMPLETE, נבנה אותו נגיש עבור מקלדת וקוראי מסך, נעבור על הפונקציות שחייבים לממש . לבסוף נראה
רכיבים: בניה של רכיב SELECT נגיש באנגולר
נראה איך לבנות רכיב SELECT, נבנה אותו נגיש עבור מקלדת וקוראי מסך, נעבור על הפונקציות שחייבים לממש ומה התפקיד שלהן.
אנגולר reactive forms | איך לבדוק שדות עם ולידציה בלחיצה על submit
אז בהמשך למדריך על reactive forms באנגולר . אביא פה עוד תוספת קטנה , שימושית אם לומר את האמת, אבל
אינטרספטור באנגולר (interceptor)
נראה מה תפקידו של אינטרספטור, איך מפעילים אותו וניתן 2 דוגמאות לאינטרספטורים שונים כדי להמחיש את השימוש בהם, אחד עבור
הגדרות אבטחה על ראוטינג של אנגולר (Guards)
בניה פשוט של GUARD על נתיב URL בקובץ - app-routing.module , הפונקציה תבדוק אם המשתמש ביצע לוג-אין, אם לא,
Image file upload with preview in reactive form
נראה איך לעצב כפתור העלאת קובץ , נשייך אותו לטופס של אנגולר, נעשה לו בדיקת אימות של סוג הטופס ונשלח
מדריך אנגולר בסיסי 101 – חלק 4 – מתחילים לבנות
מדריך בסיסי בו נדבר על התקנה של אנגולר, הכרה בסיסית של הפרויקט והספריות בו ונלמד דברים חשובים שצריך לדעת לפני
מדריך אנגולר בסיסי 101 – חלק 3 – תפקיד הספריות החדשות שיצרנו
מדריך בסיסי בו נדבר על התקנה של אנגולר, הכרה בסיסית של הפרויקט והספריות בו ונלמד דברים חשובים שצריך לדעת לפני
מדריך אנגולר בסיסי 101 – חלק 2 – הכרה של הפרויקט
מדריך בסיסי בו נדבר על התקנה של אנגולר, הכרה בסיסית של הפרויקט והספריות בו ונלמד דברים חשובים שצריך לדעת לפני
מדריך אנגולר בסיסי 101 – חלק 1 – התקנה
מדריך בסיסי בו נדבר על התקנה של אנגולר, הכרה בסיסית של הפרויקט והספריות בו ונלמד דברים חשובים שצריך לדעת לפני
אנגולר NavigationExtras – skipLocationChange
טיפ קטן, פשוט ושימושי! לא נפוץ במיוחד אבל תתפלאו לגלות כמה זה יכול להקל עליכם אם אתם משתמשים בruoter-outlet פנימי
איך לבנות Directive באנגולר
קוד קצר באנגולר המדריך איך לבנות טולטיפ על ידי שימוש ב-directive. בנוסף ניתן לראות איך לשנות נראות של התגית על
How to trigger event with another event
איך להפעיל ארוע בעזרת ארוע אחר באנגולר, נראה איך לקשור ארוע של פוקוס לארוע של כניסת עכבר ואיך לקשור ארוע
Custom pipe in angular
רשימה קצרה של pipes שמגיעים כברירת מחדל עם אנגולר ולאחר מכן הדרכה של בנית pipe חדש אשר מקבל מספר ומחזיר
איך להפעיל פונקציה ברכיב כשמתבצע ניווט באנגולר
הפעלה של פונקציה ברכיב על פי ארוע ניווט באנגולר, ניתן להפעיל בתחילת הניווט, סוף ושגיאה בניווט
הגדרה בסיסית לאנגולר ראוטינג
הגדרות בסיסיות של ראוטינג באנגולר כולל הסבר קצר למשמעות שלהם ואיך להשתמש בהן בפרויקט.
מדריך אנימציות באנגולר – מתקדם
מדריך מתקדם באנמציות של אנגולר המראה הפעלה של אנמציה על פי שינוי ערך של משתנה, מדרגות של שינויים בזמן
מדריך אנימציות באנגולר
מדריך בסיסי על יצירה של אנמציות באנגולר , תחילה ברמת רכיב ולאחר מכן נגיש לכל הפרויקט
מדריך אנגולר | reactive forms – ולידציות וחיווי בUI
החלק האומנותי הגיע ואנחנו ממש כבר לקראת סיום המיני קורס באנגולר reactive forms. בהחלט מה שחשוב לדעת מלבד לבנות ולידציות
טיפים וטריקים באנגולר (tips & tricks)
אוסף של טיפים וטריקים קצרים לעבודה יותר נכונה עם אנגולר
מדריך אנגולר | reactive forms – ולידציות בהתאמה אישית
אז אחרי שהבנתם מהם ולידציות ואיך נראים ולידציות מובנות. בטח חשבתם לעצמכם, או אפילו כבר נתקלתם בכך שלא קיימת ולידציה
SEO| שינוי Meta tag בהתאם לדף באנגולר
שינוי meta tags דינמית באנגולר לשיפור SEO והופעה במנועי חיפוש
מדריך אנגולר | reactive forms – הוספת ולידציות מובנות
אז אחד החלקים האומנותיים בעבודה עם טפסים הם הולידציות. אנגולר מציע סט שלכם של ולדציות מובנות שכן הם השימושיות לרוב
מדריך אנגולר | reactive forms – חיבור הטופס הריאקטיבי לתצוגת הטופס
אחרי שהיצרנו והרכבנו את האובייקט הריאקטיבי בעזרת formBuilder .עכשיו כל שנותר לנו זה לבנות את הטופס הHTML. ולשייך ולהגדיר, בעזרת
מדריך אנגולר | reactive forms – בסיס לבניית הטופס המגיב.
אוקיי אז הגענו לשלב שבו מתחילים לרשום קצת טופסים ולמעשה "סיימנו תיאוריה" (לא מדוייק אבל מפה והלאה זה יהיה לרוב
SEO| שינוי כותרת של הדף באנגולר
שינוי דינמי של כותרת הדף/עמוד באנגולר בשיטה הקלה והקצרה מול השיטה הנכונה יותר
שימוש יעיל ב async pipe – אנגולר
מי שמכיר pipes באנגולר, כנראה מכיר היטב את async . שימושי מאוד! מי שפחות מכיר, אז מדובר בפייפ שיודע לקבל
angular input and output in the same variable
באנגולר אפשר לכתוב [(ngModel)] , זה נותן לנו חיבור דו כיווני (קריאה וכתיבה). האם ניתן לעשות את זה לכל משתנה
משתנים נוספים באנגולר ngfor
כאשר מבצעים ngfor אפשר למשוך את ה-index שלו, i=index . בנוסף אפשר למשוך עוד נתונים מ-ngfor כמו אלמנט ראשון ואחרון או כל הזוגיים והאי זוגיים. להפעיל class על
ריבוי מודולים באנגולר
כאשר אנחנו עובדים על אפליקציה גדולה עם ריבוי קומפוננטות וה- app.module.ts הופך לרשימת קניות ארוכה ניתן לפצל את המודול בצורה הבאה: יש
custom validator for groups – אנגולר ולידטור ייחודי לגרופ ב-reactive form
אחד הדברים ששימושיים בטפסים הוא נושא הוולידציות . באנגולר השקיעו הרבה מחשבה בטפסים ובוולידציות בפרט . אז היה טיפ שיעזור