steyer_databinding.pdf

Transcript

1. 23.10.2016 1 Data Binding in Angular 2 Manfred Steyer About me … • Manfred Steyer • SOFTWAREarchitekt.at • Trainer & Consultant • GDE and MVP • Focus: Angular Page  2 Manfred Steyer
2. 23.10.2016 2 Contents • Property Binding • Event Binding • Two Way Binding Data Binding in AngularJS 1.x Page  4 Model Model Directive Nearly everything can depend on everything Leads to serveral digest cycles
3. 23.10.2016 3 Angular 2 Page  5 Component for whole App Component (e. g. list) Component (e. g. list-item) Component (e. g. list-item) 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]
4. 23.10.2016 4 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 Event Bindings (One Way, Bottom/Up) Page  8 {{ item.title }} {{ item.title }} Event-Handler Event-Handler
5. 23.10.2016 5 Event-Bindings (One-Way, Bottom/Up) • No digest cycle for propagating events • But: Events can change state  Updating Property Bindings Page  9 Property and Event Bindings Page  10 Performing Property Binding Executing Event Handlers Event occurs App is ready All handlers executed Properties bound
6. 23.10.2016 6 Two Way Binding Page  11 <input [(ngModel)]="from"> Two Way = Property and Event Bindings Page  12 <input [ngModel]="from" (ngModelChange)="from = $event"> Property + Change changed value
7. 23.10.2016 7 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 Contact [mail] manfred.steyer@SOFTWAREarchitekt.at [blog] SOFTWAREarchitekt.at [twitter] ManfredSteyer