How to make mat-checkbox unclickable in Angular material
This way it also becomes not focusable and you won't be able to check it using the keyboard.
<mat-checkbox
[checked]="state"
[class.mat-checkbox-disabled]="false"
disabled>
</mat-checkbox>
use the disabled attribute
<mat-checkbox [ngModel]="checkboxvalue" [disabled]="true"/>
or
<mat-checkbox [ngModel]="checkboxvalue" disabled/>
Refer Example
If I understand correctly, the user should never be able to toggle the checkbox manually. Instead it will be toggle programmatically depending on the input value.
You can very simply prevent the default click
behavior, so nothing happens when the checkbox is clicked:
<mat-checkbox [checked]="infoBox.value !== ''"
[disableRipple]="true"
(click)="$event.preventDefault()">
<input #infoBox matInput type="text">
</mat-checkbox>