Angular 2 Component Constructor Vs OnInit

AngularConstructorNgoninit

Angular Problem Overview


If I want function x to happen every time a component loads, whether its the first time, I navigate to a different site and navigate back or it's the fifth time the component has loaded.

What should I put function x in? The component constructor or OnInit?

Angular Solutions


Solution 1 - Angular

Constructor is predefined default method of the typescript class. There is no relation between Angular and constructor. Normally we use constructor to define/initialize some variables, but when we have tasks related to Angular's bindings we move to Angular's ngOnInit life cycle hook. ngOnInit is called just after the constructor call. We can also do the same work in the constructor but its preferable to use ngOnInit to start Angular's binding.

in order to use ngOnInit we have to import this hook from the core library:

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

Then we implement this interface with exported class (this is not compulsory to implement this interface but generally we did).

Example of using both:

export class App implements OnInit{
  constructor(){
     //called first time before the ngOnInit()
  }

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

For more detail see also Difference between Constructor and ngOnInit

Solution 2 - Angular

The first one (constructor) is related to the class instantiation and has nothing to do with Angular2. I mean a constructor can be used on any class. You can put in it some initialization processing for the newly created instance.

The second one corresponds to a lifecycle hook of Angular2 components:

  • ngOnChanges is called when an input or output binding value changes
  • ngOnInit is called after the first ngOnChanges

So you should use ngOnInit if initialization processing of your function relies on bindings of the component (for example component parameters defined with @Input), otherwise the constructor would be enough...

Solution 3 - Angular

constructor() is a typescript feature and is called for new SomeClass(). The constructor ensures proper field initialization order in class hierarchies.

ngOnInit is an Angular2 lifecycle method that is called by Angular when it's done building the component and after it evaluated the bindings and updated the inputs the first time.

See also https://stackoverflow.com/questions/35763730/difference-between-constructor-and-ngoninit-in-angular-2/35764845#35764845

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionClickThisNickView Question on Stackoverflow
Solution 1 - AngularPardeep JainView Answer on Stackoverflow
Solution 2 - AngularThierry TemplierView Answer on Stackoverflow
Solution 3 - AngularGünter ZöchbauerView Answer on Stackoverflow