תוכנית בסיסית

את תוכן האתר מציגים על ידי קובץ HTML.

בחלק הזה נבנה תוכנית לדוגמא של מחולל סיסמאות.

קובץ הטמפלט – HTML

קובץ ה-Template יהיה במבנה הבא:

<h1>Password Generator</h1>

<div>
  <label>Enter Length</label>
  <input/>
</div>

<div>
  <label>Use Letters</label>
  <input type="checkbox">
</div>

<div>
  <label>Use Numbers</label>
  <input type="checkbox">
</div>

<div>
  <label>Use Symbols</label>
  <input type="checkbox">
</div>

<div>
  <button>Generate</button>
</div>

<div>
  <label>Your Password</label>
  <input/>
</div>

אחרי שיש לנו את התבנית הבסיסית, צריך להוסיף לה פונקציונליות. לקבל את הערכים שהמשתמש הכניס, לעבד אותם ולהוציא פלט.

קובץ ה-Class

את הפונקציונליות מבצעים בקובץ ה-ts של הקומפוננטה.

נוסיף למשל פונקציה שמטפלת בלחיצה על הכפתור:

export class AppComponent {
  onButtonClick(){
    console.log('Button was clicked');
  }
}

את הפונקציה שיצרנו נחבר לכפתור שיש בתבנית:

<div>
  <button (click)="onButtonClick()">Generate</button>
</div>

אם נסתכל עכשיו בקונסול של הדפדפן נוכל לראות את המסר כשלוחצים על הכפתור.

חיברנו את האירוע (event) של הלחיצה עם הפונקציה שנמצאת בקוד. לפעולה הזאת קוראים Event Binding.

העברת מידע מהקוד לתבנית

העברנו את אירוע הלחיצה מהתבנית לקוד, עכשיו אנחנו רוצים להעביר מידע מהקוד לתבנית שתוכל להציג אותו.

נוסיף משתנה ל-class שיחזיק את הסיסמא ונאתחל אותו למחרוזת ריקה. אחר כך, בלחיצה על הכפתור, נשנה את ערך המחרוזת שיצרנו במקום את ההודעה לקונסול.

export class AppComponent {
  password: string = '';

  onButtonClick(){
    this.password = "My Password";
  }
}

עכשיו אנחנו רוצים את הערך של המשתנה הזה בתוך התיבה של הסיסמא.

<div>
  <button (click)="onButtonClick()">Generate</button>
</div>

<div>
  <label>Your Password</label>
  <input [value]="password"/>
</div>

עכשיו בלחיצה על הכפתור, נראה את המחרוזת של הסיסמא בתוך תיבת הטקסט.

הפעולה הזאת נקראת Property Binding. כשהערך שך המשתנה יוחלף, התוכנית תשנה את הערך גם בתצוגה.

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

הצגת ערך של משתנה

את הערך של המשתנה אפשר להציג בלי חיבור לרכיב מסויים בתוך סוגריים מסולסלים.

<div>
  <button (click)="onButtonClick()">Generate</button>
</div>

<div>
  <label>Your Password</label>
  <input [value]="password"/>
</div>

<div>{{ password }}</div>