Today we will discuss the difference between class constructor and angular ngOnInit. This is a very frequently asked question in the interview. In this article, we will discuss where we will use the class constructor and where we will use ngOnInit‘s hook of the component life cycle.

Angular developer sometimes writes code in the constructor which are related to angular and sometimes they are getting undefined because constructor calls before creating the component.

Now here, we will discuss constructor and ngOnInit. The class constructor will call first after that ngOnInit will fire.

What is constructor :

A constructor is not the concept of Angular. It is the concept of JavaScript’s class. When you will initialize the class, the constructor will call every time. A class constructor is the member function that will execute whenever we will create a new instance or object of that class. The constructor will have the same name as the class and doesn’t have any return type.

class Contact {
	constructor() {
        console.log("Constructor called");
    }
}

let c1 = new Contact(); // Constructor called
let c2 = new Contact(); // Constructor called
let c3 = new Contact(); // Constructor called

When you create an object, you also initialize the constructor with the new keyword.

What is ngOnInit:

On the other hand, ngOnInit is the second stage of the component life cycle hooks whenever is called when angular set up all the properties at the time of ngOnChanges. ngOnInit initialize the directives or component, set up all the angular properties after the first ngOnChanges.

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

export class AppComponent implements OnInit {
    constructor() {
    
    }
    
    ngOnInit() {
        console.log("ngOnInit called");
    }

}

When we will creating a component then ngOnInit() will call after first ngOnChanges(). It is a good practice to initialize all the angular scope under the ngOnInit() not under the constructor.

NgOnInit Life Cycle Hook:

ngOnInit is the second hook in the component life-cycle. ngOnInit will fire after the first ngOnChanges. ngonInit initialize the angular directives or component after first ngOnchanges(). ngOnInit set-up the angular component after angular sets of input properties. The class constructor only initializes the local variables nothing else. Note down one thing, angular properties are not set after the constructor. It initializes only after ngOnInit.

Wrong Way :
export class AppComponent implements OnInit {
    constructor( private userService:UserService ) {
        this.userService.getUser();
        this.userService.saveUser();
    }
    
    ngOnInit(){
    
    }

}

If you will initialize or declare the angular related code in the constructor, so you will need to declare at the time of the test case also. So It is good practice to declare only those things in the constructor which are out of scope from angular components.

Correct Way :
export class AppComponent implements OnInit {
    constructor( private userService:UserService ) {
        
    }
    
    ngOnInit(){
        this.userService.getUser();
        this.userService.saveUser();
    }

}

If you will use some APIs that are under angular scope so you will write that code in ngOnInit because ngOnInit is called when a component is created and first ngOnChanges() is called.

DOM Manipulation :
export class AppComponent implements OnInit {
    @ViewChild('tem') template: TemplateRef<any>;
    constructor() {
        console.log(this.tem.nativeElement);        //undefined
    }

    ngOnInit() {
        console.log(this.tem.nativeElement);        // available here
    }

}

If you want some dom-manipulation related to angular in the constructor, you got undefined because all the dom-manipulation happened after calling the ngOnInit().

Conclusion:

In this article, we learned about class constructor and angular ngOnInit. We also learned about where we will use the class constructor and where we will use ngOnInit. We learned about dom manipulation with ngOninit.

If you have any doubt, please comment below or you will react out by email. My email id is admin@thedevfamily.com.

Resources:

Leave a Reply

Your email address will not be published. Required fields are marked *