The Constructor, a default method of the class, is called when the class is instantiated and makes sure that the fields of the class and its subclasses are properly initialized. Dependency Injector (DI), or Angular, analyses the function constructor? parameters before trying to locate providers that match the types of the function constructor? parameters, resolving them, and passing them to the function constructor?when it calls new MyClass() to build a new instance.

When Angular is finished building the component, it calls the life cycle hook ngOnInit.
Most of the time, we avoid doing anything in the function constructor? by using ngOnInit for all initialization and declaration. The only "work" that the function constructor? should perform is initializing class members. Therefore, you should only use function constructor? to set up Dependency Injection. Better to "start" from ngOnInit(), which is where/when component bindings are determined.

Example

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

@Component({
	...
})
// implementing OnInit
export class AppComponent implements OnInit {
  
  constructor() {
     // constructor called first time before the ngOnInit()
  }

  ngOnInit() {
     // called after the constructor and called  after the first ngOnChanges() 
  }
  
}

Difference between?ngOnInit()?and?constructor()

  • All initialization and declaration operations are performed using function constructor().
  • Writing actual work in the function constructor() should be avoided.
  • The function constructor() should not perform any actual "work," merely initialize class members.
  • Therefore, to set up Dependency Injection, initialize class fields, etc., we should utilize the function constructor() method.
  • The "real work code" that must be run as soon as the class is instantiated should be put in ngOnInit().
  • similar to loading database data to display to the user in your HTML template view. Such programming should be done in ngOnInit ().

Conclusion

  • Initialize class members in the Constructor.
  • The functionality that has to run right away when the class is created should go in the ngOnInit() function.

Recommended Posts

View All

Angular 13 - Create a Firebase login with Facebook


Learn how to build Firebase Login with Facebook in Angular with Firebase and how to use the Firebase Facebook login authentication module in simple wa...

14 REASONS TO USE ANGULAR FOR WEB DEVELOPMENT


Angular is one of the most popular JavaScript-based frontend frameworks in the world and also very popular here on GitHub.

Building Professional UI Components using Angular Material Design


Learn how to build professional UI components using Angular Material Design in this comprehensive tutorial. Elevate your UI game today!

Defining Metadata with a Decorator in Angular


Learn how to define metadata with a decorator in Angular. Our comprehensive guide will teach you how to simplify your code and enhance its performance...

Angular Component Lifecycle Hooks Example


Learn about Angular component lifecycle hooks with our comprehensive example. Understand how they work and optimize your code for better performance.