What is the Difference between Constructor and ngOnInit in AngularJS ?

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

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);

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

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');
    }
}

chevron_right


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.



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.