Question

What is the key difference between a constructor and ngOnInit?

Answer 1

Constructor is a default method in TypeScript classes that are normally used for the initialization purpose. On the other hand, the ngOnInit is specifically an Angular method and is used to define Angular bindings. Even though constructors are getting called first, it is always preferred to move all of your Angular bindings to the ngOnInit method.

See the following example how we can use ngOnInit by implementing OnInit interface as follows:

1. export class App implements OnInit{  
2.   constructor(){  
3.      //called first time before the ngOnInit()  
4.   }  
5.   ngOnInit(){  
6.      //called after the constructor and called  after the first ngOnChanges()  
7.   }  
8. }  

Answer 2

The Constructor is a default method of the class that is executed when the class is instantiated and ensures proper initialisation of fields in the class and its subclasses. Angular, or better Dependency Injector (DI), analyses the constructor parameters and when it creates a new instance by calling new MyClass() it tries to find providers that match the types of the constructor parameters, resolves them and passes them to the constructor.

ngOnInit is a life cycle hook called by Angular to indicate that Angular is done creating the component.

Mostly we use ngOnInit for all the initialization/declaration and avoid stuff to work in the constructor. The constructor should only be used to initialize class members but shouldn't do actual "work". So you should use constructor() to setup Dependency Injection and not much else. ngOnInit() is better place to "start" - it's where/when components' bindings are resolved.

export class App implements OnInit{

  constructor(private myService: MyService){

     //called first time before the ngOnInit()

  }

  ngOnInit(){

     //called after the constructor and called  after the first ngOnChanges()

     //e.g. http call...

  }

}