Real UseCases for ngDoCheck (Angular9)

Question

I am a beginner in Angular & learning by myself and i have stucked in ngDoCheck life cycle method

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

Parent Component:

user={
   name:"xxx"
}

update(){
  this.user.name="yyy"
}

Parent view:

<button (click)="update">update</button>
<child-comp [inputprop]="user"></child-comp>

Child Component

ngDoCheck(){
console.log(this.inputprop);
}

As Far as I know,using this life cycle method to get the latest changes in deeper level that ngOnChanges can't detected the input property changes in deeper level.

In Simple words,ngOnChanges will detect the property changes only the reference of property gets changed.

In Above Example ngDocheck lifecycle method doesn't done anything to get the latest changes of property. But instead, change detection helps to get the latest changes in deeper level

I wants to know the exact use case for using the ngDoCheck lifecycle method.

Answer 1

Your child component change detector may have the following strategies

1. default
2. onPush

In the default strategy, CD runs for any change in @Input() decorated properties

In the onPush strategy, CD runs when you pass a new object (reference) to the @Input decorated properties.

Regardless of the strategy, CD always run in the following scenarios,

1. An event such as click, submit gets fired
2. XHR call to work with an API
3. Asynchronous JavaScript functions such assetTimeOut() or setInterval() gets executed

Keep in mind that Angular CD can be visualized as a directed tree, which means all components can be seen as a node in a tree and Angular always runs CD from root node to the bottom of the tree.

Even there is an event fired in CC-121, Angular would run CD from the root component to the bottom. However, running of CD would stop at the node where strategy is set to onPush and you are not passing a new object in one of the @Input decorated properties.

So now you understand a bit about when and how CD runs, ngDoCheck() life cycle gets executed each time CD runs for the component.

I hope it helps.

Thanks