0

I am using Angular 15 and also with it the Material Components. I wanted to use the material checkbox and implement my own function (the click function) where I set the checkItem.start to true/false and where I would expect that the checkbox should be getting checked or unchecked, depending on my flag value. I don't want to use the two-way binding, as it updates my values automatically when checking the checkbox, which I want to change inside in my click function myself and update it.

The problem is my checkbox will always get checked before I even enter the function in my "click" property and even if my flag is getting updated with another value, the component is not getting updated. I also tried to use the ChangeDetectorRef.detectChanges() function for the updating, but unfortunately it is not working.

It's also important to mention that I am using customized provider, which looks like this:

providers: [
      { provide: MAT_CHECKBOX_DEFAULT_OPTIONS, useValue: {} as MatCheckboxDefaultOptions }
   ]

The HTML for then Angular Component:

<mat-checkbox
        [disabled]="isReadOnly(checkItem) || checkItem.finished"
        [checked]="checkItem.start"
        (click)="doCheck(checkItem, $event)"
</mat-checkbox>

Am I maybe using the wrong component properties?

reti18
  • 1
  • use `(change)` event not (click). NOTE: in the [API](https://material.angular.io/components/checkbox/api) you can see the properties (marked as `@Input`) and the events (marked as `@Output`). Else you need use preventDefault and stopPropagation on the event click. – Eliseo Jul 13 '23 at 09:45

0 Answers0