What is the difference between OnChanges and DoCheck in Angular 2?

Difference between them seems to be very confusing to me. What is difference between them and exactly when they are called

• ngOnChanges() (OnChanges) is called when a value bound to an input has changed so you can run custom code when an input has changed.

• ngDoCheck() (DoCheck) is called when change detection runs so you can implement your custom change detection action.

I was playing with these two and found some interesting stuff that worth sharing :

ngDoCheck():

This will get called every time one of Zone hooks get called,

How?

Angular2 uses NgZone, which as @Gunter said as well, has monkey patched all the async events inside the browser, you can think of it like ;

var originalTimeout = window.setTimeout;
window.setTimeout = function(callback,time) {
    originalTimeout(callback,time);

    // notify Angular that a setTimeout is fired
    // e.g run ngDoCheck() for components
}

So every time you run setTimeout, you're actually calling above function which is monkey patched the original setTimeout.

Disclaimer: Above code is completely abstract and in Zonejs you're not gonna find it, but I just wanted to somehow show what it means when they say "Zone has patched all the async functions and have hooks in them";

Anyways, so every time you run a setTimeout (or any other async function), when it's finished, ngDoCheck will be called.

So it means angular just checks to see if there has been a change in the model or any of the @inputs or not.

When this is handy?

ngDoCheck becomes handy if your component's ChangeDetectionStrategy is OnPush, meaning that it's only gonna update the view if any of the @Inputs references has been changed.

Which there are some cases that you want to use OnPush but you want to do some manual updating on every check.

Check out this plunker .

You'll find that even if the ChangeDetectionStrategy of the on-push-test component is OnPush, when we click on mutate food and that mutates the foods list, I'll run the markForCheck inside the ngDoCheck and update the view after a dummy if condition.

So this means, this function will get called A LOT !!! so be careful what you're putting inside it.

So in short :

ngDoCheck : this function will get called every single time an event has fired in the app that may cause a change, but not necessarily is considered a change.

ngOnChanges

This will only and only get called if there has been a reference change in any of the @Inputs bindings, regardless of the ChangeDetectionStrategy of the component.

So if we mutate foods array like this :

this.foods.push({value: 'steak-3', viewValue: 'Fish'});

The ngOnChanges will not get called, but if we update the reference like this:

this.foods = [{value: 'steak-3', viewValue: 'Fish'}];

It'll get called.