Difference between ngOnInit and Constructor

Angular is an open source Model-View-Controller framework which is similar to the JavaScript framework. It's probably one of the most popular modern day web frameworks available today. This framework is used for developing mostly Single Page applications. The framework has been developed by a group of developers from Google itself. The framework is always kept up to date, because of the sheer support of Google and ideas from a wide community forum. Also, it always incorporates the latest development trends in the market.

Angular has a constructor and ngOnInit method which are executed on component load. There is a great resemblance between the two but also differences.

Here, in this post, we explore the differences between constructor and ngOnInit.

So, let's get started -

Constructor

A constructor is a special method which will be called whenever we create new objects. And generally used to initialize the class members. It is a feature of the class itself, an object-oriented design concept.

ngOnInit()

Angular exposes few lifecycle hooks that give visibility into these events and to do post-initialization operations when they occur. One of the lifecycle hooks is ngOnInit(). It will be executed, when Angular did with the creation of component DOM And will be called after the constructor execution and after first ngOnChanges.

Constructor vs ngOnInit

• Angular provides life cycle hook ngOnInit by default.  ngOnInit is called right after the directive's data-bound properties have been checked for the first time, and before any of its children have been checked. It is invoked only once when the directive is instantiated.

• The Constructor is a default method of the class that is executed when the class is instantiated and ensures proper initialization of fields in the class and its subclasses. Angular or better Dependency Injector (DI) analyzes the constructor parameters and when it creates a new instance by calling new MyClass() it tries to find providers that match the types of the constructor parameters, resolves them and passes them to the constructor.

• OnInit is not mandatory but considered good practice. Mostly ngOnInit is used for all the initialization/declaration and avoid stuff to work in the constructor.

• The constructor should only be used to initialize class members but shouldn't do actual "work". Use constructor() to setup Dependency Injection and not much else.

• ngOnInit() is a better place to "start" - it's where/when components' bindings are resolved.

• The constructor of the component is called when Angular constructs components tree. All lifecycle hooks are called as part of running change detection. When Angular constructs components tree the root module injector is already configured so you can inject any global dependencies.

• A constructor can be used in any class. You can put in it some initialization processing for the newly created instance.

• Use ngOnInit, if initialization processing relies on bindings of the component.

• Generally, if one needs, one makes the calls of the services in the ngOnInit () and not in the constructor

• A constructor is a default method runs (by default) when a component is being constructed. And ngOnInit is component's lifecycle hook which runs first after constructor(default method) when a component is being initialized.

• The constructor will be called first and Oninit will be called after the constructor method.

• In the constructor, we can not call HTML elements. However, in ngOnInit () we can.

• The constructor is part of ECMAScript. On the other hand ngOnInit() is a notion of angular.

• We can call the constructors in all classes even if we do not use Angular.

• ngOnInit() method is added to the prototype of the checkbox component function. That means someone has to invoke it, whereas constructor is automatically called by JavaScript engine. And this method is called Angular when the component is rendered.