What is difference between constructor and ngOnInit in Angular?

In Angular, the constructor() is a special method used to initialize a class instance and inject dependencies, while ngOnInit() is an Angular-specific life cycle hook that runs after the component is fully initialized, allowing for the execution of logic once bindings and properties (such as @Input) are available. By learning the difference between constructor() and ngOnInit(), one can master correct dependency injection, handle asynchronous operations appropriately, optimize performance, and prevent bugs.

Key takeaways:

• Use constructor() for basic class setup and dependency injection, and ngOnInit() for advanced initialization tasks such as fetching data or interacting with the DOM.

• constructor() is called first when a class instance is created, while ngOnInit() is called after Angular sets up the component’s environment.

• ngOnInit() ensures that the component’s properties are fully accessible and ready for logic execution, unlike the constructor, which may not have access to certain Angular-specific properties.

The constructor() method

The constructor() method is derived from object-oriented programming and isn’t solely the concept of Angular. The primary function of a constructor is to create an instance of a component class. It is a default method for a class that initializes classes and subclasses and ensures proper execution of roles.

Remember that:

• Whenever we call a class, we have to pass the exact match of the parameter type to the constructor of that class, e.g., Student(arg1:string, arg2:string, arg3:int). These arguments must be of the same type in the constructor of the Student() class.

• It runs before Angular fully initializes the components view and data bindings.

• It might not have access to specific properties like @Input values or the DOM.

Working of the constructor() method

Constructor parameters are analyzed by Angular dependency injection. Whenever a class instance is created, the system searches for matching providers that define how to construct those dependencies. Subsequently, the resolved dependencies are then passed to similar components.

Code example

Let’s see how the constructor works:

Code explanation

In the above code:

• Lines 12–14: We set the initial value of the message1 property when an instance of the SampleComponent class is created.

The ngOnInit() method

The ngOnInit() method is an Angular-specific life cycle hook. It allows us to run code at different stages of an element’s life. We need to import OnInit to use this method. The actual business logic is performed in this method. When called, it indicates that Angular is done creating the component. This method is called after Angular has initiated the component properties, inputs, and data bindings. It also guarantees that the component’s environment is ready before running the initialization logic.

Code example

Let’s see the difference with the code:

Code explanation

In the app.component.ts file:

• Lines 13–17: We create the constructor() method for basic initialization.

• Lines 20–26: We create the ngOnInit() method for more complex logic. We use the ngOnInit() method to change helloWorld, showing how it can improve or adjust the starting value set in the constructor. We increased the value of the counter property in ngOnInit(), demonstrating that it can perform actions that rely on the component being set up.

Conclusion

The constructor() is essential for class setup and dependency injection, but it’s not part of Angular’s life cycle hooks and should be used primarily for initial setup. The ngOnInit(), on the other hand, is the ideal place for executing code after Angular has initialized the component, making it suitable for tasks like fetching data, interacting with the DOM, and performing complex logic that requires a fully set-up component.