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?

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

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