Angular not calling the detectChanges method on button click

I have added a breakpoint in the angular source code on the detectChanges() method:



I noticed that when I click on the button from the component below, the breakpoint is not hit.

import { Component, DoCheck } from '@angular/core';

@Component({
selector: 'app-some',
standalone: true,
imports: [],
template: `
<button (click)="onClick()">click me</button>
<h3>{{ someValue }}</h3> `,
styleUrl: './some.component.scss'
})
export class SomeComponent implements DoCheck {

ngDoCheck(): void {
console.log('ngDoCheck');
}

someValue = 'initial value';

onClick() {
console.log('onClick');
this.someValue = 'other';
}

}


The tick method is indeed called though.

Can someone please explain in the context of angular change detection why the detectChanges() method is not called?

Continue reading...