Angular 2 lifecycle
Lifecycle
This is Component class topic.
Angular 2 class
Angular Reference explains more details. LIFECYCLE HOOKS
Example
lifecycle.component.ts
import { Component,
OnInit,
OnChanges,
DoCheck,
AfterContentInit,
AfterContentChecked,
AfterViewInit,
AfterViewChecked,
OnDestroy } from '@angular/core';
@Component({
selector: 'app',
template: '<div>LifeCycle</div>'
})
export class LifeCycleComponent implements OnInit {
constructor() {
console.log('constructor');
}
ngOnChanges() {
console.log('onChanges');
}
ngOnInit() {
console.log('onInit');
}
ngDoCheck() {
console.log('doCheck');
}
ngAfterContentInit() {
console.log('afterContentInit');
}
ngAfterContentChecked() {
console.log('contentChecked');
}
ngAfterViewInit() {
console.log('afterViewInit');
}
ngAfterViewChecked() {
console.log('afterViewChecked');
}
ngOnDestroy() {
console.log('onDestroy');
}
}
Result
Check console.
constructor lifecycle.component.js:20 onInit lifecycle.component.js:23 doCheck lifecycle.component.js:26 afterContentInit lifecycle.component.js:29 contentChecked lifecycle.component.js:32 afterViewInit lifecycle.component.js:35 afterViewChecked lifecycle.component.js:23 doCheck lifecycle.component.js:29 contentChecked lifecycle.component.js:35 afterViewChecked
