In this tutorial, we will be learning how Angular ngOnInit and ngOnDestroy life cycle Hooks work. We learned about the Angular lifecycle hooks in the Previous tutorial. In This chapter let us learn ngOnInit and ngOnDestroy hooks
Table of Contents
ngOnInit
The ngOnInit or OnInit hook is called when the component is created for the first time. This hook is called after the constructor and first ngOnChanges hook is fired.
This is a perfect place where you want to add any initialization logic for your component.
Note that ngOnChanges hook is fired before ngOnInit. Which means all the input properties are available to use when the ngOnInit is hook is called
This hook is fired only once
This hook is fired before any of the child directive properties are initialized.
ngOnDestroy
The ngOnDestroy or OnDestroy hook is called just before the Component/Directive instance is destroyed by Angular
Use this hook to Perform any cleanup logic for the Component. This is the correct place where you would like to Unsubscribe Observables and detach event handlers to avoid memory leaks.
Example of ngOnInit
Let us build a Component that illustrates the use on OnInit and OnDestroy hook
Let us build a Child component, which is conditionally displayed or destroyed based on flag from the Parent Component
Child Component
Create the child.component.ts
First Import the OnDestroy and OnInit from the angular/core library
1 2 3 | import { Component, OnDestroy, OnInit } from '@angular/core'; |
The Component template just displays the title “Child Component”
1 2 3 4 5 6 7 8 9 | @Component({ selector: 'child-component', template: ` <h2>Child Component</h2> ` , styleUrls: ['./app.component.css'] }) |
Declare child Component implements OnInint and OnDestroy Hooks
1 2 3 | export class ChildComponent implements OnInit, OnDestroy { |
Add the constructor and add to log when the constructor is called
1 2 3 4 5 | constructor() { console.log('ChildComponent:Constructor'); } |
Finally. Create the hook method. The method writes to the console log
1 2 3 4 5 6 7 8 9 | ngOnInit() { console.log('ChildComponent:OnInit'); } ngOnDestroy() { console.log('ChildComponent:OnDestroy'); } |
The complete code for child component
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | import { Component, OnDestroy, OnInit } from '@angular/core'; @Component({ selector: 'child-component', template: ` <h2>Child Component</h2> ` , styleUrls: ['./app.component.css'] }) export class ChildComponent implements OnInit, OnDestroy { constructor() { console.log('ChildComponent:Constructor'); } ngOnInit() { console.log('ChildComponent:OnInit'); } ngOnDestroy() { console.log('ChildComponent:OnDestroy'); } } |
Parent Component
Here’s how our App Component looks like
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | import { Component, OnInit, OnDestroy } from '@angular/core'; @Component({ selector: 'app-root', template: ` <h2>Life Cycle Hook</h2> <button (click)="toggle()">Hide/Show Child </button> <child-component *ngIf="displayChild"></child-component> ` , styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit, OnDestroy { displayChild = true; constructor() { console.log('AppComponent:Constructor'); } toggle() { this.displayChild = !this.displayChild; } ngOnInit() { console.log('AppComponent:OnInit'); } ngOnDestroy() { console.log('AppComponent:OnDestroy'); } } |
Note that the parent template
1 2 3 4 5 6 7 | template: ` <h2>Life Cycle Hook</h2> <button (click)="toggle()">Hide/Show Child </button> <child-component *ngIf="displayChild"></child-component> ` , |
We have used *ngIf directive, which hides/shows the child component based on the displaychild value. The toggle function toggle the status of the displaychild.
We have added OnInit and OnDestroy hook to parent component also.
Run the Code
When you run the code for the first time you will see the following in the console window
1 2 3 4 5 6 | AppComponent: Constructor AppComponent: OnInit ChildComponent:Constructor ChildComponent:OnInit |
Click on the toggle button. The Child Component is destroyed and you will see the following logs
1 2 3 | ChildComponent:OnDestroy |
Click on the toggle button again. The Child Component is created again and you will see that the constructor of the child component is called again and then the OnInit is invoked
1 2 3 4 | ChildComponent:Constructor ChildComponent:OnInit |
The above code demonstrates how the OnInit & OnDestroy works
Difference Between Constructor and ngOnInit
The Constructor is executed when the class is instantiated. It has nothing do with the angular. It is the feature of Javascript and Angular does not have the control over it
The ngOnInit is Angular specific and is called when the Angular has initialized the component with all its input properties
The @Input properties are available under the ngOnInit lifecycle hook. This will help you to do some initialization stuff like getting data from the back-end server etc to display in the view
@Input properties are shows up as undefined inside the constructor
Conclusion
OnInit Hook is useful for Initialising the Component like getting data from back-end server, while OnDestroy hook must be used to perform clean-up operation in the Component.
Great
Great
how you added OnInit and OnDestroy hook to parent component
please explain
hiiiiiiiiiiiii