Presentation from JAX 2016, Mainz

1. 1
Wiederverwendbare
Komponenten mit Angular 2.0
Deep Dive
Manfred Steyer
Über mich …
Manfred Steyer
Trainer & Berater
Fokus: Angular
Page  2

2. 2
Ziele
Möglichkeiten zum Entwickeln eigener
Komponenten in Angular 2 kennen lernen
Fokus auf Konzepte
Nicht: Allgemeine Angular-2-Einführung
Page  3
Inhalt
Angular 2
Komponenten vs. Direktiven
Erste Schritte: Bindings
Kommunikation zwischen Direktiven
Life-Cycle-Hooks
Two-Way-Binding
Zusammenfassung
Page  4

3. 3
Didaktik
Folien
Viel Live-Coding
Page  5
ANGULAR 2
Page  8

4. 4
Was ist Angular 2
SPA-
Framework
Moderne
Apps
Nachfolger
von
AngularJS
Große
Community
BETA
Stabiler
Kern
Page  9
Direktiven und Komponenten
Page  14
• Verhalten für Elemente
• CSS-SelektorDirektiven
• Direktiven mit Template
• Kann weitere Direktiven
und Komponenten nutzen
Komponenten
• Offener Standard
• Unterstützung durch
Angular 2 geplant
Web-
Components

5. 5
DEMO-KOMPONENTE
Page  15
"Im Kleinen verstehen; im Großen
anwenden"
Page  16
[Robert Sedgewick]

6. 6
Option-Box und Option-Item
Page  17
Option-Box
App-Component
App-Component
Page  19
<h1>{{title}}</h1>
[…]
<option-item
[selected]="true"
[value]="1"
(change)="change($event)">
Per Express
</option-item>
[…]

7. 7
Option-Item (Controller)
Page  20
@Component({
selector: 'option-item',
templateUrl: 'option-item.html',
styleUrls: ['app/option-item/option-item.css']
})
export class OptionItem {
@Input() selected: boolean;
@Input() value: string;
@Output() change = new EventEmitter();
select() { […] }
}
DEMO
Page  24

8. 8
KOMMUNIKATION
ZWISCHEN DIREKTIVEN
Page  25
Option-Box
Page  26
<option-box [value]="[…]">
<option-item […]>Per Express</option-item>
<option-item […]>Per Einschreiben</option-item>
</option-box>

9. 9
Untergeordnete Komponenten abfragen
Page  27
@ContentChildren(OptionItem)
items: QueryList<OptionItem>;
DEMO
Page  28

10. 10
LIFECYCLE-HOOKS
Page  29
Lifecycle-Hooks (Auszug)
Page  30
OnInit ngOnInit
OnDestroy ngOnDestroy
OnChanges ngOnChanges
AfterContentInit ngAfterContentInit

11. 11
DEMO
Page  32
TWO-WAY-BINDING
Page  33

12. 12
Two-Way-Binding
Page  34
<option-box [value]="value"
(valueChange)="setValue($event)">
[…]
</option-box>
<option-box [(value)]="value">
[…]
</option-box>
<option-box [value]="value"
(valueChange)="value = $event">
[…]
</option-box>
DEMO
Page  35

13. 13
Zusammenfassung
 Property-Bindings
 Event-Bindings
 Two-Way-Binding =
Property- + Event-Binding + Syntax-Zucker
 Content-Projection
 Kommunikation mit ContentChildren
 Life-Cycle-Hooks
manfred.steyer@SOFTWAREarchitekt.at
SOFTWAREarchitekt.at
ManfredSteyer
Contact