מה הם קומפוננטות

קומפוננטה היא הרכיב הכי בסיסי בתוכנית אנגולר. תוכנית אנגולר בנויה כמו משחק לגו, יש לנו אבני בנין ומהם אנחנו יכולים לבנות כל מיני מבנים שונים.

יש לנו את קומפוננטת הבסיס, שתופיע כשהאפליקציה שלנו תעלה, וממנה אנחנו ממשיכים לקרוא ולהעלות את שאר הקומפוננטות.בפשטות, קומפוננטה היא קובץ Html שמכיל קוד לאיך אנחנו רוצים להציג את המידע שלנו על המסך, וקובץ ts שמכיל את הלוגיקה של מה שאנחנו רוצים להציג.כל component מכיל:

Template שזה קוד ה-HTML שמוצג על המסך.

Class הקוד שעושה שכל מאחורי התצוגה.

Metadata הגדרות של הקומפוננטה.

יצירת component

ng g c comp-name

העברת מידע מה-class ל-template

בתוך קובץ ה-ts ששם נמצא ה-class אנחנו מגדירים משתנים שזמינים לנו בתצוגה של הקומפוננטה – Properties.

כאן אנחנו מחברים את ה-id של ה-input ונותנים לו את המשתנה myId שהגיע מה-class.

html file

<input [id]="myId" type="text">

הקוד הבא עושה בדיוק אותו הדבר עם שימוש בכתיב ה"שפם".

<input id={{ myId }} type="text">

שימוש מותנה בעיצוב

אפשר להתנות הופעה של class של css על ידי שימוש במשתנה בוליאני שמגיע מתוך קובץ ה-ts. נניח שיש לי שגיאה ואני רוצה לשנות את העיצוב של הרכיב כשהיא מופיעה.

בקובץ ה-ts אני אתן ערך של true למשתנה hasErrors ואז:

html file

<h2 [class.text-danger]="hasErrors">

ה-class שנקרא text-danger יופיע רק במידה והערך של hasErrors יהיה חיובי.

עיצוב מותנה של כמה classes – שימוש ב-ngClass

component ts file

public hasErrors = false;
public messageClasses = {
    "text-success": !this.hasErrors,
    "text-danger": this.hasErrors
}

component html file

<h2 [ngClass]="messageClasses"></h2>

הקוד בודק איזה classes מקבלים את הערך true ומצמיד אותם לרכיב שבו מופיע המשתנה messageClasses.

component html file

<div class="search-div" [ngClass]="{changeBackground: searchValue != ''}"></div>

כאן, במקרה שמחרוזת החיפוש לא ריקה, יופיע ה-class של changeBackground.

שימוש מותנה ב-style

component html file

<h2 [style.color]="hasErrors ? 'red' : 'green' "></h2>

כאן במקרה במשתנה hasErrors הוא true הערך של color יהיה red. אחרת הערך ש-color יקבל יהיה green.

שימוש ב-ngStyle

component ts file

public titleStyles = {
    color: "blue",
    fontStyle: "italic"
}

בתוך קובץ התצוגה נשתמש ב-styles שהגדרנו.

component html file

<h2 [ngStyle]="titleStyle"></h2>

לשים לב
בהגדרת משתני ה-style בתוך קובץ ה-ts משתמשים בכתיב CamelCase ולא במקף בהפרדה בין המילים. fontStyle ולא font-style.