Angular 2 Component Constructor Vs OnInit [duplicate]

Answer 1

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

Answer 2

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

Answer 3

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