Everything you need to know about change detection in Angular

1 Like

First of all, thank you for the great article.

What about DOM events triggering change detection on a view such as a click. I wanted to clarify how it fits into the order of operations described in the article. For instance, we have the following component:

@Component({
  selector: "child",
  template: `
    <h1>{{config.state}}</h1>

    <button
      (click)="0">
      Async Action in Child
    </button>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ChildComponent {
  @Input() config;
}

Let’s say, the input property was mutated on the ChildComponent's parent component first which didn’t lead to DOM update and then there was a button click within ChildComponent. And it is only now (after clicking the button) that interpolation on ChildComponent was updated.

Question is, does it mean that compView.state on ChildComponent has been switched to ChecksEnabled at that moment? I can’t figure out which step it takes in the list of operations.

Here is the demo on StackBlitz.

1 Like

Thanks for asking the question and welcome to inDepth community!

Events are not processed during change detection, they schedule it indirectly through zone.js.

Angular 2 separates updating the application model and reflecting the state of the model in the view into two distinct phases. The developer is responsible for updating the application model. Angular, by means of change detection, is responsible for reflecting the state of the model in the view.

You can read more about it in Do you really know what unidirectional data flow means in Angular.

Yes, but it’s not part of change detection. It’s part of events processing.

1 Like

Maxim, thank you for your time and answering my question. However, having read this series of articles These 5 articles will make you an Angular Change Detection expert and as an attempt to answer my own initial question, would it be correct to state the following?

After a DOM event originates from the component with ChangeDetectionStrategy.OnPush but before onMicrotaskEmpty event is emitted, all parent components up to the root one, no matter their ChangeDetectionStrategy will be marked as to be checked by switching their compView.state to ChecksEnabled. Thus, when the tick is called to initiate CD for the whole application, then during this cycle, CD is also going to be run for the above-mentioned component which triggered DOM event, even though it makes use of ChangeDetectionStrategy.OnPush and its Input reference is not changed.

In other words, this approach prevents from breaking unidirectional data flow and takes into consideration user interaction events since Angular can’t know whether such an event changes anything, so it assumes it does. That’s why it switches appropriate flag (what happens on the phase of updating the application model) so that during the subsequent CD cycle our component will be checked.

1 Like

Yes, that’s correct.

1 Like