Databinding in Angular 2

Slide 1

Slide 1 text

Data Binding in Angular 2 Manfred Steyer

Slide 2

Slide 2 text

About me … • Manfred Steyer • SOFTWAREarchitekt.at • Trainer & Consultant • GDE and MVP • Focus: Angular Page  2 Manfred Steyer

Slide 3

Slide 3 text

Data Binding in AngularJS 1.x Page  4 Model Model Directive Nearly everything can depend on everything Leads to serveral digest cycles

Slide 4

Slide 4 text

Angular 2 Page  5 Component for whole App Component (e. g. list) Component (e. g. list-item) Component (e. g. list-item)

Slide 5

Slide 5 text

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]

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

Event Bindings (One Way, Bottom/Up) Page  8 {{ item.title }} {{ item.title }} Event-Handler Event-Handler

Slide 8

Slide 8 text

Event Bindings (One Way, Bottom/Up) • No digest cycle for propagating events • But: Events can change state  Updating Property Bindings Page  9

Slide 9

Slide 9 text

Property and Event Bindings Page  10 Performing Property Bindings Executing Event Handlers Event occurs App is ready All handlers executed Properties bound

Slide 10

Slide 10 text

Two Way Binding Page  11

Slide 11

Slide 11 text

Two Way = Property and Event Bindings Page  12 Property + Change changed value

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Contact [mail] [email protected] [blog] SOFTWAREarchitekt.at [twitter] ManfredSteyer