Angular 4 : Difference between ngDoCheck vs ngAfterViewChecked

Question

In Angular 2+, ngDoCheck and ngAfterViewChecked seems to perform same function. ngDoCheck is said to be called whenever change detection is triggered. Now this change detection will be triggered with change in View. As per docs, ngAfterViewChecked is called whenever view changes.

What is the need of two lifecycle hooks here when one was sufficient?

Answer 1

There is a huge difference:

ngDoCheck is called very often, on each change detection run, and you should normally avoid to use it to avoid performance problems. It will detect the changes on any element, content or view change behavior.

ngAfterViewChecked is only called after the bindings of the view children are checked (it is related to the view only).

Answer 2

These both are angular lifecycle hooks. And these are the interfaces from Angular's core library and can be hooked to your code to listen to changes on the component properties.

Here is the complete cycle sequence

1) ngOnChanges()

2) ngOnInit()

3) ngDoCheck()

4) ngAfterContentInit()

5) ngAfterContentChecked()

6) ngAfterViewInit()

7) ngAfterViewChecked()

From the official documentation

ngDoCheck

Detect and act upon changes that Angular can't or won't detect on its own.

Called during every change detection run, immediately after ngOnChanges() and ngOnInit().

ngAfterViewChecked()

Respond after Angular checks the component's views and child views / the view that a directive is in.

Called after the ngAfterViewInit and every subsequent ngAfterContentChecked().

For more detail: https://blog.angularindepth.com/if-you-think-ngdocheck-means-your-component-is-being-checked-read-this-article-36ce63a3f3e5

Answer 3

One important difference to notice is that ngDoCheck lifecycle hook fires before the property changes within the current component and it's child components have taken an effect, whereas ngAfterViewChecked fires after those changes have occured, so you compare previous and current values of the component properties.

Answer 4

The DoCheck hook allows you to integrate into the change detection cycle and find changes within the objects references or any areas where Angular did not detect changes automatically. The interface is as follows:

interface DoCheck {
    ngDoCheck(): void; 
}

depending on the component tree size and complexity, the ngDoCheck method is going to execute enormous amount of times and may become a performance bottleneck if you poorly implement the code. Avoid using ngDoCheck method unless necessary.

When using properties of the object type, Angular is going to watch the changes by value reference, meaning it detects the change of the entire value, but not the changes in the child properties. That is the case where we are going to use DoCheck lifecycle hook and detect changes in the object.

The ngAfterViewChecked method represents the AfterViewChecked lifecycle hook and interface. It allows you to provide custom change tracking that is not handled by Angular due to some reason. The behaviour is similar to the AfterContentChecked hook but applies to the view template children rather than projected content.

interface AfterViewChecked {
    ngAfterViewChecked(): void; 
}

Primarily DoCheck is for your Business Logic changes which will not be detected by angular in scenarios as stated above. The AfterViewChecked is for View tracking.

Hope that helps!!!