Let’s see about lifecycle hooks in Angular2.
There are eight main hooks for every component to have robustness in our built applications.
Here is the complete lifecycle hook interface inventory:
ngOnChanges - called when an input binding value changes
ngOnInit - after the first ngOnChanges
ngDoCheck - after every run of 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 component is destroyed
A component has a lifecycle managed by Angular.
Angular creates it, renders it, creates and renders its children, checks it when its data-bound properties change, and destroys it before removing it from the DOM.
Angular offers lifecycle hooks that provide visibility into these key life moments and the ability to act when they occur.
Constructor:
This won’t be taken as lifecycle hooks but this will instantiate all component hooks and it is run first when the component is activated.
>app.ts file:
class MyComponent {
constructor( ) {
/*all other modules injection and dependency injection and initialization will go here*/
console.log(“This is Constructor”); // printed first in console
}
}
ngOnChanges:
This hook will be run when our component is setting or resetting the values for input properties.This will be called before ngOnInit hook whenever the changes in the input property made in a component.
This will be used to render the DOM and updating the DOM for each and every changes made in the component attributes.
This may run multiple times in the lifetime of the each component
>app.ts file:
class MyComponent {
ngOnChanges( ) {
/*Called when the changes made in the input properties of the component before it binds to view*/
console.log(“This is ngOnChange”); // printed second in console
}
}
ngOnInit:
The Initialization of the component or directive of our app will be made in this hook after the angular displays the initial value of input properties.
When changes made in input properties of the component this hook will be called after the ngOnChanges.
This hook will run only one time after initializing all the properties of the component
>app.ts file:
class MyComponent {
ngOnInit( ) {
/*the Initialization of every input properties and functionalities will go here*/
console.log(“This is ngOnInit”); // printed third in console
}
}
ngDoCheck:
This will be called immediately after ngOnInit, And called on every change made in component properties, So the operations that have to be done on the change of any input properties can be written in this hook.
This will be executed for every change detection in cycles even there is no properties changed.
>app.ts file:
class MyComponent {
ngDoCheck( ) {
/*The functionalities to be done for every change made in input properties will go here*/
console.log(“This is ngDoCheck”); //printed whenever the changes made
}
}
ngAfterContentInit:
This will be called after the angular updates the component’s view values this will be called after ngDoCheck hook.
This hook can be written only for component of angular application
If the content is inserted in the component this will be called.
>app.ts file:
class MyComponent {
ngAfterContentInit( ) {
/*The functionalities to be done when initialization of the whole content in the component will go here*/
console.log(“This is ngAfterContentInit”); /*printed when the whole content is initialized*/
}
}
ngAfterContentChecked:
This hook will be called after the angular checked the content has been projected into the component. This will be called after ngAfterContentInit and every call of ngDoCheck hook of the component
This hook also can be written only for component of angular application
The component this will be called when the content which is inserted has been changed.
>app.ts file:
class MyComponent {
ngAfterContentChecked( ) {
/*The functionalities to be done when changes present in the component will go here*/
console.log(“This is ngAfterContentChecked”); /*printed when the content is checked and changes present*/
}
}
ngAfterViewInit:
Called when the angular checks the view of the component and child views of the components.
It will check all the HTML view has been initialized.
>app.ts file:
class MyComponent {
ngAfterViewInit( ) {
/*The functionalities to be done when initialization of the whole content has been projected into view will go here*/
console.log(“This is ngAfterViewInit”); /*printed when the whole content is projected in view and runs only once*/
}}
ngAfterViewChecked:
Initially this hook will be called after the ngAfterContentChecked hook and after every call of ngAfterViewInit and subsequent of ngAfterContentChecked.
It will check all initialized view or child view had any changes
>app.ts file:
class MyComponent {
ngAfterViewChecked( ) {
/*The functionalities to be done when changes present in the component and they are projected in view will go here*/
console.log(“This is ngAfterViewChecked”); /*printed when the content is checked and changes present are projected in view*/
}}
ngDestroy:
This hook will be called only when the component is removed from the view of the angular component, So the deallocation of memory and removing the intervals, timeout variables will be done in this hook.
>app.ts file:
class MyComponent {
ngDestory ( ) {
/*The functionalities to be done when the component is unmounted from the app will go here*/
console.log(“This is ngDestory”); /*printed in after the component is unmounted*/
}}
