Component lifecycle hooks in Angular 2.0
Download as PPTX, PDF7 likes3,547 views
The document discusses Angular change detection and lifecycle hooks. It provides examples of using change detection strategies like OnPush, examples of implementing DoCheck to watch for changes, and summaries of the different lifecycle hooks and when they are called.
![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)});
}
}
}](https://image.slidesharecdn.com/component-lifecycle-hooks-160217194636/85/Component-lifecycle-hooks-in-Angular-2-0-16-320.jpg)
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>
- 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