What is the Difference between Constructor and ngOnInit in AngularJS ? Last Updated : 24 Apr, 2020 Comments Improve Suggest changes Like Article Like Report 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: javascript 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: javascript 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. Comment More infoAdvertise with us Next Article What is the Difference between Constructor and ngOnInit in AngularJS ? techni621 Follow Improve Article Tags : Web Technologies AngularJS AngularJS-Misc Similar Reads What is the difference between ng-app and data-ng-app in AngularJS ? In web application development, AngularJS is one of the most favorite dynamic JavaScript frameworks that has HTML through script tags, enabling us to augment the HTML attributes using the directives and facilitating the data binding through the expressions.In this article, we will see the concepts o 5 min read Difference between ng-container and ng-template in AngularJS Both ng-container and ng-template can be used to create responsive and dynamic components. Angular provides a set of structural directives that can be used with both ng-template and ng-container such as: ng-ifng-forng-switch. These structural directives are used to alter the structure of the DOM by 3 min read What is the Difference Between required and ng-required in AngularJS ? In web application development, AngularJS is one of the most favorite dynamic JavaScript frameworks that has HTML through script tags, enabling us to augment the HTML attributes using the directives and facilitating the data binding through the expressions.In AngularJS, we can use certain Directives 3 min read What's the difference between ng-pristine and ng-dirty in AngularJS ? AngularJS supports client-side form validation. AngularJS keeps track of all the form and input fields and it also stores the information about whether anyone has touched or modified the field or not. The two different classes ng-dirty and ng-pristine that are used for form validation, are described 2 min read What is the difference between $watch and $observe in AngularJS ? AngularJS provides different methods to observe/watch the changes in its elements and variables. The $observe and $watch are two different methods that serve this purpose. $observe is a method that is responsible to observe/watch the changes in the DOM attribute. We use $observe when we want to obse 3 min read What is the Difference Between factory and service in AngularJS ? AngularJS is a JavaScript-based framework. It can be used by adding it to an HTML page using a <script> tag. AngularJS helps in extending the HTML attributes with the help of directives and binding of data to the HTML with expressions. In this article, we will explore the differences between t 4 min read What is the difference between '@' and '=' in directive scope in AngularJS ? AngularJS is a popular JavaScript framework, that provides powerful features for building dynamic web applications. When creating custom directives in AngularJS, you may come across the need to define a scope for your directive. The two most common methods to do this are by using the @ and = symbols 4 min read What's the difference between an Angular Component and Module? In this article, we will explore the Components & Modules in Angular, along with knowing the basic implementation & lastly, will know the differences between them. Component: In Angular, a Component is a piece of code that represents a view. It is responsible for rendering the content and ha 6 min read What is the Difference Between $evalAsync and $timeout in AngularJS? AngularJS is a JavaScript framework, which may be utilized by including it in an HTML web page the usage of a <script> tag. AngularJS enables in extension the HTML attributes with the assistance of directives and binding of data to the HTML with expressions. It provides various tools for handl 5 min read What is the Difference Between $routeProvider and $stateProvider in AngularJS ? In AngularJS, as we create Single-Page Applications, we need to implement the routing of components to view those images without having full page reloads. This can be achieved with the most popular routing methods, i.e., $routeProvider (ngRoute) and $stateProvider (ui-router).In this article, we wil 5 min read Like