Data Binding and Forms in Angular 2

1. 1
Angular 2: A closer look to the
innovations for data binding and forms
Manfred Steyer
ManfredSteyer
Current Activities
Page  2
Software Engineering Leadership
Part-Time Studies (M.Sc.) for Manager
software-engineering-leadership.de
arJS - Deep Dive
er 2015
nings
w-jax15
November, Munich
www.jax.de
webtech conference 2015
October, Munich
www.webtechcon.de
BASTA! 2015
October, Mainz
www.basta.net

2. 2
Goal
No general intro into Angular 2
Focusing on a specific topic
Data-Binding and Forms
Page  4
Contents
 Bindings in Angular 2
 Setting up Bindings
 DEMO: Using ng-model in Angular 2
 Handling Forms
 DEMO: Declarative Forms
Page  5

3. 3
BINDINGS IN ANGULAR 2
Page  6
Some Goals of Angular 2
Page  7
Performance Components
Predictability

4. 4
Data-Binding in Angular 1.x
Page  8
Model Model Directive
Nearly everything can depend on everything
Solution: Multiple Digest-Cycles
Component-Tree in Angular 2
Page  9
Component for whole App
Component (e. g. list)
Component
(e. g. list-item)
Component
(e. g. list-item)

5. 5
Rules for Property-Bindings
 A Component only depends on its own data (and
indirectly on its parents data)
 A Component must not depend on its children data!
 Dependency Graph is a tree
 Angular only needs only one iteration („digest“)
to update tree
Page  11
Property-Binding
Page  12
model
item item
{{ item.title }} {{ item.title }}
[http://victorsavkin.com/post/110170125256/change-detection-in-angular-2]

6. 6
Further Performance Improvements
Page  14
Immutable
Data
Observables
Event-Bindings (One-Way, Bottom/Up)
Page  16
{{ item.title }} {{ item.title }}
Event-Handler
Event-Handler

7. 7
Event-Bindings (One-Way, Bottom/Up)
No Digest for propagating events up
But: Events can change state  Digest for
updating Property-Bindings
Page  17
Property- and Event-Bindings
Page  19
Performing
Property-Binding
Executing
Event-Handlers
Event occurs
App is ready
All Handlers executed
Properties bound

8. 8
SETTING UP BINDINGS
Page  20
Component Controller
Page  21
@Component({
selector: 'flight-list'
})
@View({
templateUrl: 'flight-list.html',
directives: [NgFor, NgIf]
})
export class FlightList {
from: string;
to: string;
flights: Array<Flight>;
constructor(flightService: FlightService) { }
searchFlights() { [...] }
selectFlight(flight) { [...] }
}

9. 9
View
Page  22
<table [hidden]="flights.length == 0">
<tr *ng-for="#flight of flights">
<td>{{flight.id}}</td>
<td>{{flight.date}}</td>
<td>{{flight.from}}</td>
<td>{{flight.to}}</td>
<td><a href="#" (click)="selectFlight(flight)">Select</a></td>
</tr>
</table>
<td [text-content]="flight.id"></td>
View
Page  23
<table bind-hidden="flights.length == 0">
<tr template="ng-for: var flight of flights">
<td>{{flight.id}}</td>
<td>{{flight.datum}}</td>
<td>{{flight.abflugOrt}}</td>
<td>{{flight.zielOrt}}</td>
<td><a href="#" on-click="selectFlight(flight)">Select</a></td>
</tr>
</table>

10. 10
Recap
Property-Binding: One-Way; Top/Down
Event-Binding: One-Way; Bottom/Up
Two-Way-Binding?
Two-Way = Property-Binding + Event-Binding
Page  24
Combining Property- and Event-Bindings
Page  25
<input [ng-model]="from" (ng-model)="updateFrom($event)">
updateFrom(newValue) {
this.from = newValue;
}

11. 11
Combining Property- and Event-Bindings
Page  26
<input [ng-model]="from" (ng-model)="from = $event">
Syntax-Sugar for „simulating“ Two-Way
Page  27
<input [(ng-model)]="from">
<input bindon-ng-model="from">

12. 12
Types of Binding
Page  28
<input [(ng-model)]="from">
[…]
<table [hidden]="flights.length == 0">
<tr *ng-for="#flight of flights">
<td>{{flight.id}}</td>
<td>{{flight.date}}</td>
<td>{{flight.from}}</td>
<td>{{flight.to}}</td>
<td><a href="#" (click)="selectFlight(flight)">Select</a></td>
</tr>
</table>
DEMO: USING NG-MODEL
Page  29

13. 13
HANDLING FORMS
Page  31
Approaches in Angular 2+
• ng-model
• like AngularJS 1.x
• „Forms-Controller“ is created by Angular
Declarative
• You provide „Forms-Controller“
• More control
Imperative
• You provide model
• Angular builds form dynamically
• Not implemented yet!
Data-
Driven

14. 14
Declarative Forms
Page  33
export class FlightList {
constructor(flightService: FlightService) {
[…]
this.filter = {
from: 'Graz',
to: 'Hamburg'
};
[…]
}
}
View
Page  34
<form #f="form">
<input type="text" ng-control="from"
[(ng-model)]="filter.from" required>
<div *ng-if="!f.controls.from.valid">
…Error…
</div>
<div
*ng-if="f.controls.von.hasError('required')">
…Error…
</div>
[…]
</form>
FormDirective
f
ControlGroup
form
Control
from

15. 15
DEMO
Page  35
Imperative Forms
export class FlightList {
filter: ControlGroup;
constructor(flightService: FlightService, fb: FormBuilder) {
[…]
this.filter = fb.group({
from: ['Graz', Validators.required],
to: ['Hamburg', Validators.required]
});
[…]
}
searchFlights() {
var filter = this.filter.value;
[…]
}
}

16. 16
Imperative Forms
Page  37
<form [ng-form-model]="filter">
<input id="from" ng-control="from" type="text">
<div *ng-if="!filter.controls.from.valid">…Error…</div>
[…]
</form>
Summary
 Angular 2 is „fast by default“
 Two kinds of Binding
 Property Binding, 1 $digest-iteration
 Event Binding, 0 $digest-iterations
 Better Performance with immutables and observables
 Two-Way-Binding =
Property Binding + Event Binding + Syntax Sugar
Page  39

17. 17
Summary
 Three approaches for forms
 Declarative: ng-model, like in ng1
 Imperative: more control
 Data Driven: „Forms Generator“
(not implemented yet)
Page  40
[mail] manfred.steyer@softwarearchitekt.at
[blog] www.softwarearchitekt.at
[twitter] ManfredSteyer
Contact
www.software-engineering-leadership.de