Component lifecycle hooks in Angular 2.0

3. DOMData

4. <!-- Expressions -->
Please type your name : {{name}}
<!-- Directives & Data Binding -->
Name: <input ng-model="name" value="..." />
Template
name :
Scope
value
elm.bind('keydown', … )
$scope.$watch('name', … )
Directive
$rootScope

8. tick(): void {
if (this._runningTick) {
throw new BaseException("ApplicationRef.tick is called recursively");
}
var s = ApplicationRef_._tickScope();
try {
this._runningTick = true;
this._changeDetectorRefs.forEach((detector) => detector.detectChanges());
if (this._enforceNoNewChanges) {
this._changeDetectorRefs
.forEach((detector) => detector.checkNoChanges());
}
} finally {
this._runningTick = false;
wtfLeave(s);
}
}

13.  CheckAlways
 Default
 CheckOnce
 OnPush
 Checked
 Detached

14. constructor(private ref: ChangeDetectorRef) {
ref.detach();
setInterval(() => {
this.ref.detectChanges();
}, 5000);
}
Doing a local check
every five seconds.

15. class Component{
data:any = {};
_differ: KeyValueDiffer;
constructor(private _differs:KeyValueDiffers){
this._differ = this._differs.find(this.data).create(null);
}
ngDoCheck() {
var changes = this._differ.diff(this.data);
if (changes) {
changes.forEachAddedItem ((r) => { log(r.key,r.currentValue); });
changes.forEachChangedItem((r) => { log(r.key,r.currentValue); });
changes.forEachRemovedItem((r) => { log(r.key,r.currentValue); });
}
}
}

16. class Component{
data:any = [];
_differ: IterableDiffer;
constructor(private _differs:IterableDiffers){
this._differ = this._differs.find(this.data).create(null);
}
ngDoCheck() {
var changes = this._differ.diff(this.data);
if (changes) {
changes.forEachAddedItem ((r) => { this.addData.push(r)});
changes.forEachRemovedItem((r) => { this.removeData.push(r)});
}
}
}

19. Component Directive
Template
Content
DOM Element
<component1 directive1>
<component2>
This is content.
</component2>
</component1>
(component1)
(component2)
(directive1)

20. App
Component1
Component2
Directive1
Component3
loading
<app>Loading</app>
<div>
<component1 directive1="{{name}}">
<component2>
This is content.
</component2>
</component1>
</div>
<div>
<h4>{{name}}</h4>
<ng-content />
</div>
This is
content
<div>
<h4>{{name}}</h4>
<ng-content />
</div>

22. Component
TemplateContent

23. Component
TemplateContent
1
2
3
4
5
6
7

24. Hooks Descriptions
ngOnChanges Called when an input or output binding value changes
ngOnInit After the first ngOnChanges
ngDoCheck Developer's custom change detection
ngAfterContentInit After component content initialized
ngAfterContentChecked After every check of component content
ngAfterViewInit After component's view(s) are initialized
ngAfterViewChecked After every check of a component's view(s)
ngOnDestroy Just before the directive is destroyed

25. Component
Directive
TemplateContent
DOM Element
ngAfterContentInit
ngAfterContentChecked
ngAfterContentInit
ngAfterContentChecked
ngAfterContentInit
ngAfterContentChecked
ngAfterContentInit
ngAfterContentChecked
AfterViewInit
AfterViewChecked
AfterViewInit
AfterViewChecked
AfterViewInit
AfterViewChecked
AfterViewInit
AfterViewChecked

26. Component
Directive
TemplateContent
DOM Element
ngAfterContentChecked
ngAfterContentChecked
ngAfterContentChecked
ngAfterContentChecked
AfterViewCheckedAfterViewChecked
AfterViewChecked
AfterViewChecked