What is the difference between Angular ngOnInit() and ngOnChanges()?

angular typescript ngoninit ngonchanges
Chanaka Amarasinghe picture Chanaka Amarasinghe · Jun 8, 2018 · Viewed 10.5k times · Source

Angular provides lifecycle hook ngOnInit() and ngOnChanges() by default. Why should ngOnInit be used, if we already have a ngOnChanges? And constructor also.

Answer

Amit Chigadani picture Amit Chigadani · Jun 8, 2018

To keep it very short.

ngOnInit() is used to execute any piece of code for only one time (for eg : data fetch on load).

ngOnChanges() will execute on every @Input() property change.

If you want to execute any component method, based on the @Input() value change, then you should write such logic inside ngOnChanges().

As you claim why do we need ngOnInit() when we have ngOnChanges(), it is because you cannot execute one time code, on every @Input() property change. And you cannot use constructor as the replacement of ngOnInit() as well. Because the bindings, such as @Input properties are not available within the constructor.

I think you will get fair idea with this Diff between OnInit and constructor

Related questions

Difference between Constructor and ngOnInit

Angular provides life cycle hook ngOnInit by default. Why should ngOnInit be used, if we already have a constructor?

Read More
Angular 2 ngOnInit not called

I am building an Angular 2 app with version beta.8. In this app i have a component which implements OnInit. In this component i have the function ngOnInit, but the ngOnInit function is never called. import { Component, OnInit } from 'angular2/core'; @…

Read More
Can't bind to 'ngModel' since it isn't a known property of 'input'

I've got the following error when launching my Angular app, even if the component is not displayed. I have to comment out the <input> so that my app works. zone.js:461 Unhandled Promise rejection: Template parse errors: Can't …

Read More