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

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 the difference between component and directive in Angular?


Learn the difference between Angular's components and directives. Discover their unique features and how to use them to build powerful web application...

What is Angular CLI and how to do I use it?


Angular CLI is a powerful tool for developing Angular applications. Learn what it is and how to use it to streamline your development process.

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.

Dependency Injection in Angular with example


Dependency injection, a well-known programming concept, is what separates a class from its dependencies