When I bind an event to elements on a component's HTML page, the component continues to detect changes even when the element event is fired. Despite setting the change detection mode of the component to OnPush, this behavior persists. To test this, I created a simple project with no dependencies except for the Angular core library.
Here is the code snippet:
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent {
title = 'angular-tour-of-heroes';
onClick() {
console.log("click");
}
value(){
console.log("detect fired");
return "value";
}
}
app.component.html code
<button type="button" (click)="onClick()">button</button>
{{value()}}
The browser console output after clicking the button:
click
detect fired
After clicking the button, "detect fired" is displayed in the console without any code calling the method ChangeDetectorRef.markForCheck().
Thank you!
I expected the value() method not to be executed when I click the button unless I specifically call
changedetectionref.markForCheck()