Difference between Constructor and ngOnInit in Angular.

Ankit Maheshwari
Dec 26, 2019 · 3 min read


Image for post
Image for post

Learn Angular-In-Depth | Learn TypeScript-In-Depth.
इस लेख को हिंदी में पढ़ने के लिए यहां क्लिक करें

Constructor

  • The Constructor is a default method of the class that is executed when the class is instantiated.
  • Constructor ensures proper initialization of fields (class members) in the class and its subclasses.
  • Angular Dependency Injector (DI) analyse the constructor parameters.
  • When we call new MyClass() it creates a new instance of the class.
  • While calling new MyClass() we must have to pass the exact match of the parameters type to the constructor of the class, example:
    new MyClass(arg1:number, arg2:string, argN:any)
  • These arg1:number, arg2:string, argN:any, must be of same type defined in constructor of class MyClass.

ngOnInit

  • ngOnInit is a life cycle hook called by Angular to indicate that the Angular is done creating the component.
  • In order to use OnInit we have to import it in the component class like this:
    import {Component, OnInit} from '@angular/core';
  • Actually implementing OnInit in every component is not mandatory. But considered good practice.
  • A class implements OnInit like this:
    export class AppComponent implements OnInit { }

Using ngOnInit

Angular calls its ngOnChanges() method whenever it detects changes to the value of input properties of the component (or directive).

Learn more about ngOnChanges() in Angular Project with Lifecycle Hooks.


Difference between ngOnInit() and constructor()

  • 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 setup 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 initialize 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.

Next, I written a whole new Article

For you to understand the difference between initialization from ‘constructor’ and ‘ngOnInit’ in depth! That covers in ‘Lifecycle Hooks’.

Please follow the Link to understand Lifecycle Hooks:
Angular Project with Lifecycle Hooks.


Done! 🤩 the difference was so simple.

See you later👋👋

Feel free to comment down in the comment box… If I missed anything or anything is incorrect or anything does not works for you :)
Stay connected for more articles.

Stay connected for more articles:
https://medium.com/@AnkitMaheshwariIn


If you wouldn’t mind giving it some claps 👏 👏 since it helped, I’d greatly appreciate it :) Help others find the article, so it can help them!

Always be clapping…

Image for post
Image for post

Originally published at https://www.codewithchintan.com on December 26, 2019.

JavaScript In Plain English

New JavaScript + Web Development articles every day.

Ankit Maheshwari

Written by

👨‍💻 Developer | ✍ Blogger (7+ years of total experience, with 4+ years of experience in Hybrid Mobile Application Development.)

JavaScript In Plain English

New JavaScript + Web Development articles every day.

Ankit Maheshwari

Written by

👨‍💻 Developer | ✍ Blogger (7+ years of total experience, with 4+ years of experience in Hybrid Mobile Application Development.)

JavaScript In Plain English

New JavaScript + Web Development articles every day.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store