Everything you need to know about change detection in Angular

1 Like

What about DOM events triggering change detection on a view such as a click. I would like 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 and then the button was clicked which in turn triggered CD and subsequent DOM interpolation update.

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.