Angular 2 Component Constructor Vs OnInit

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