Databinding in Angular 2

Transcript

1. Data Binding in Angular 2 Manfred Steyer
2. About me … • Manfred Steyer • SOFTWAREarchitekt.at • Trainer & Consultant • GDE and MVP • Focus: Angular Page  2 Manfred Steyer
3. Data Binding in AngularJS 1.x Page  4 Model Model Directive Nearly everything can depend on everything Leads to serveral digest cycles
4. Angular 2 Page  5 Component for whole App Component (e. g. list) Component (e. g. list-item) Component (e. g. list-item)
5. Property Binding (One Way, Top/Down) Page  6 model item item {{ item.title }} {{ item.title }} [http://victorsavkin.com/post/110170125256/change-detection-in-angular-2]
6. Property Binding (One Way, Top/Down) • Only one digest cycle needed • Child component must not modify parent component (e. g. by using setters) • Angular 2 checks for this in dev mode
7. Event Bindings (One Way, Bottom/Up) Page  8 {{ item.title }} {{ item.title }} Event-Handler Event-Handler
8. Event Bindings (One Way, Bottom/Up) • No digest cycle for propagating events • But: Events can change state  Updating Property Bindings Page  9
9. Property and Event Bindings Page  10 Performing Property Bindings Executing Event Handlers Event occurs App is ready All handlers executed Properties bound
10. Two Way Binding Page  11 <input [(ngModel)]="from">
11. Two Way = Property and Event Bindings Page  12 <input [ngModel]="from" (ngModelChange)="from = $event"> Property + Change changed value
12. Summary • Property Binding: One Way; Top/Down • Event Binding: One Way; Bottom/Up • Two Way = Property Binding + Event Binding • Conventions for Two Way Binding • Align to this conventions in own components Page  13
13. Contact [mail] manfred.steyer@SOFTWAREarchitekt.at [blog] SOFTWAREarchitekt.at [twitter] ManfredSteyer