Skip to content
Related Articles

Related Articles

What is the Difference between Constructor and ngOnInit in AngularJS ?
  • Last Updated : 24 Apr, 2020

Constructor: Constructor is the default method for a class that is created when a class is installed and ensures the proper execution of the roles in the class and its subsections. Angular are preferably the Dependency Injector (DI), analyzes the builder’s components and when creating a new feature by calling the new MyClass() tries to find suppliers that match the builder’s parameter types, resolve them and pass them to similar components.

new MyClass(someArg);

Example:




var AddNumbers= (function () {
    function AddNumbers(x, y) {
        this.x = x;
        this.y = y;
    }
    AddNumbers.prototype.add = function () {
      return this.x + point.x;
    };
    return AddNumbers;
})();
  
  
var numbers = new AddNumbers(2, 4);
var additionOfNumbers = numbers.add();
console.log(additionOfNumbers);

Output:

6

ngOnInit: OnInit is a life cycle widget called Angular to show that Angular is made to create a component. We have to import OnInit like this to use it (actually using OnInit is not mandatory but it is considered good).

Syntax:



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

and to use it to execute the OnInit method, we should use a section like this:

Example:




import { Component, OnInit } from '@angular/core';
  
@Component({
    selector:'app-checkbox',
    templateUrl:'./checkbox.component.html',
    styleUrls: ['./checkbox.component.css']
})
  
export class CheckboxComponent implements OnInit {
    constructor() {
        console.log('Called Constructor');
    }
  
    ngOnInit() {
        console.log('Called ngOnInit method');
    }
}

Output:

Called Constructor
Called ngOnitit method

Note: Class app sales

constructor () {
// First called before ngOnInit ()
}
Oninit () {
// Named after the constructor and named after NgOnChanges()
}

Use this interaction to apply custom startup thinking after the launch of the admin property. NGOnInit is named after the indexing of the target sites for the first time, and before any of its children are tested. Only once a guide is included.

Difference between ngOnInit and Constructor:

  • We mostly use ngOnInit in every startup/announcement and avoid things to work in builders. The constructor should only be used to start class members but should not do the actual “work”.
  • So you should use the constructor() to set Dependency Injection and not much. ngOnInit() is a better “starting point” – this is where / when component combinations are solved.
  • We use constructor() for all the initialization/declaration.
  • It’s better to avoid writing actual work in the constructor.
  • The constructor() should only be used to initialize class members but shouldn’t do actual “work”.
  • So we should use constructor() to set up Dependency Injection, Initialization of class fields, etc.
  • ngOnInit() is a better place to write “actual work code” that we need to execute as soon as the class is instantiated.
  • Like loading data from Database — to show the user in your HTML template view. Such code should be written in ngOnInit().

Conclusion:

  • Constructor initializes class members.
  • ngOnInit() is a place to put the code that we need to execute at very first as soon as the class is instantiated.

Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.

My Personal Notes arrow_drop_up
Recommended Articles
Page :