Angular 2 Component Constructor Vs OnInit [duplicate]

Question

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?

Spellman

Answer 1

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

Ultramicroscope

But you didn't answer the actual question. which one we should use in this case..? – Alost

ngOnInit is not called just after the constructor call, between of them there is ngOnChanges: angular.io/guide/lifecycle-hooks – Largeminded

@JugalSingh You should use ngOnInit for binding related work. Constructor usage is not recommended as it affects the performance. Unless there is a dire need of initializing something prior hand, onInit serves the purposes very well – Profusion

Kind of feels like web forms hell all over again. I just wanted to know that the constructor was called before ngInit in the <strike>webforms</strike> life-cycle – Mulch

Answer 2

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...

Lazor

Are there any situations where using ngOnInit over the constructor would be bad? – Visional

Answer 3

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 Difference between Constructor and ngOnInit

Riendeau

You are 100% right and I upvote for you. In my mind, if we describe ngOnInit as React's componentDidMount, all the confusion will be gone. But to be honest, for developers, we just need to have only one initialization phrase, no matter it is called. The very old fashion way is use a function like class to build up a component class, so the injection is passed as arguments in and you only need one $onInit. Ng2+ is not a piece of beautiful artwork. – Bearwood

The constructor is a TypeScript language feature with certain restrictions. There is nothing Angular can do aboit it. – Plumper