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

Building High-Quality User Interfaces with Angular Material Design


Learn how to build high-quality user interfaces using Angular Material Design. Follow these best practices for consistency, responsiveness, accessibil...

What is an Angular Module?


Learn what an Angular module is, its purpose, and how to create and use them in your Angular applications. Get started with this comprehensive guide.

Angular 13 NgModule Tutorial with Example


NgModule is an Angular decorator that organises your single-page Angular application's services, pipelines, directives, and components.

Full Angular 13 Firebase Authentication Tutorial Example


We'll show you how to create an Angular Firebase authentication system from the ground up with the Firebase Real-time NoSQL cloud database.

What is TypeScript and how it works?


TypeScript is a strongly typed superset of JavaScript that enhances code maintainability and scalability. Learn about its features and benefits here.