Angular ngOnInit And ngOnDestroy Life Cycle hook

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

                              

import { Component, OnDestroy, OnInit } from '@angular/core';
                            
                        

The Component template just displays the title “Child Component”

                              

@Component({
  selector: 'child-component',
  template: `
      <h2>Child Component</h2>
      ` ,
  styleUrls: ['./app.component.css']
})
                            
                        

Declare child Component implements OnInint and OnDestroy Hooks

                              

export class ChildComponent implements OnInit, OnDestroy {
                            
                        

Add the constructor and add to log when the constructor is called

                              
 
constructor() {
    console.log('ChildComponent:Constructor');
  }
 
                            
                        

Finally. Create the hook method. The method writes to the console log

                              

  ngOnInit() {
    console.log('ChildComponent:OnInit');
  }
 
  ngOnDestroy() {
    console.log('ChildComponent:OnDestroy');
  }
 
                            
                        

The complete code for child component

                              

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

                              

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

                              
 
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

                              
 
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

                              
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

                              
 
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.

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.