jeudi 13 juillet 2023

Angular 15 mat-checkbox, use own logic to check

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?




Aucun commentaire:

Enregistrer un commentaire