Property binding allows binding a property in the component class to an element property in the template. This creates a one-way binding from the class to the view. Examples shown include binding a property to an image src, text color, and CSS class. Event binding allows binding to events in the template to call methods in the class, creating a one-way binding from view to class. Two-way binding is shown using a method to update the class property on input events as well as using ngModel for simpler two-way binding between an input and class property.

1. Binding
natankrasney@gmail.com
1

2. Property Binding
‫זה‬ view‫ה‬ ‫אל‬ model ‫ה‬ ‫מתוך‬ binding ‫יצר‬ ‫אשר‬ interpolation ‫שנקרא‬ ‫מה‬ view ‫ב‬ ‫קודם‬ ‫ראינו‬
one way binding ‫נקרא‬
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<h1>{{name}}</h1>
<img src='{{url}}' /> `
})
export class AppComponent {
name = 'Angular';
url = 'http://lorempixel.com/100/100'
}
natankrasney@gmail.com
2
‫ל‬ ‫שקול‬ ‫והוא‬ property binding ‫נקרא‬ ‫הבא‬ ‫הביטוי‬
interpolation
<img [src]="url" />
view ‫אל‬ model ‫מ‬ ‫החץ‬

3. Property Binding - ‫סכמטי‬ ‫תאור‬
natankrasney@gmail.com
3
{ } < >
Component class Component view
class properties DOM
[ ] ‫או‬ {{ }} ‫בעזרת‬ ‫מימוש‬

4. Style Binding
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `<h1 [style.color]="Enable ? 'black' : 'grey'">Hello Angular</h1>`
})
export class AppComponent {
Enable = true;
}
natankrasney@gmail.com
4
style ‫של‬ color ‫מאפין‬ ‫בין‬ Binding
model ‫ב‬ ‫מאפיין‬ ‫לבין‬ view‫ב‬
app.component.ts
view ‫אל‬ model ‫מ‬ ‫החץ‬

5. Class Binding
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: ` <h1>Hello Angular</h1>
<button class="my_btn" [class.extraclass]="Enable">Click Me</button>`,
styles:[ ` .my_btn{font-size:150%;}
.extraclass{color:blue;background-color:grey;}`
]
})
export class AppComponent {
Enable = true;
}
natankrasney@gmail.com
5
app.component.ts
‫מאפיין‬ ‫לבין‬ view‫ב‬ class.extraclass ‫מאפין‬ ‫בין‬ Binding
‫יופיע‬ extraclass ‫אז‬ Enable ‫אם‬ .model ‫ב‬ Enable
‫יופיע‬ ‫לא‬ ‫אחרת‬ button‫ב‬
view ‫אל‬ model ‫מ‬ ‫החץ‬

6. Event Binding
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `<button (click)="clickHandler()">ClickMe</button>`
})
export class AppComponent {
counter:number = 0;
clickHandler(){
;this.counter++;
console.log("clicked : "+this.counter);
}
}
natankrasney@gmail.com
6
view‫ב‬ event ‫בין‬ Binding
‫החץ‬ .class ‫ב‬ method ‫לבין‬
model ‫ל‬ view ‫מ‬ - ‫הפוך‬
‫ל‬ ‫כפרמטר‬ $event ‫ב‬ ‫שימוש‬
‫פרמטרים‬ ‫לדעת‬ ‫מאפשר‬ clickHandler
‫עכבר‬ ‫בלחיצת‬ ‫לדוגמה‬ ‫חשוב‬ .‫נוספים‬
x,y ‫ב‬ ‫לשימוש‬

7. Event Binding - ‫סכמטי‬ ‫תאור‬
natankrasney@gmail.com
7
< >
Component class Component view
{ }
DOM eventsclass methods
( ) ‫בעזרת‬ ‫מימוש‬

8. Two Way Binding
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: ` <h1>Two way binding</h1>
<h2>subject : {{subject}}</h2>
<input type="text" [value]="subject" (input)="inputHandler($event)">
<button (click)="subject = ''">Clear</button>`
})
export class AppComponent {
subject = "Two way binding";
inputHandler($event : any){
this.subject = $event.target.value;
}
}natankrasney@gmail.com
8
Model : subject View: input
app.component.ts
‫משנה‬ Model ‫ב‬ subject ‫השדה‬ ‫שינוי‬
‫ולהיפך‬ View ‫ב‬ input ‫את‬
view ‫ל‬ model ‫מ‬ Binding
model ‫ל‬ view ‫מ‬ Binding
inputHandler ‫דרך‬

9. Two Way Binding ‫עבור‬ ngModel ‫ב‬ ‫שימוש‬
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: ` <h1>Two way binding</h1>
<h2>subject : {{subject}}</h2>
<input type="text" [(ngModel)]="subject"/>
<button (click)="subject = ''">Clear</button>`
})
export class AppComponent {
subject = "Two way binding";
}
natankrasney@gmail.com
9
‫בין‬ Two way binding
view : ‫ל‬ model - subject
input
‫מוסיפים‬ ‫עם‬ ‫רק‬ ‫עובד‬ ‫זה‬ : ‫חשוב‬
app.module.ts ‫של‬ imports ‫ל‬ FormsModule
'@angular/forms' ‫בשימוש‬
Model : subject View: input