I need to programmatically disable the input of a mat-autocomplete. I dont mean to disable the autocomplete functionality, I mean to disable the input.
Here my template:
<mat-form-field>
<input
matInput
[formControl]="filterControl"
[matAutocomplete]="auto"
[disabled]="isDisabled"
[ngClass]="isDisabled ? 'disabled' : ''"
(focus)="onFocus()"
/>
<mat-autocomplete
#auto="matAutocomplete"
(opened)="optionListOpened()"
(closed)="optionListClosed()"
>
<mat-option *ngFor="let option of showOptions | async" [value]="option.label">
{{ option.label }}
</mat-option>
Where isDisabled property can be true or false.
I doesnt work. I simply tried this:
disabled="true"
and get this error: Type 'string' is not assignable to type 'boolean'
I tried this workaround, but css class is being applied after focusOut and I need it from the beggining.
[ngClass]="isDisabled ? 'disabled' : ''"
.disabled {
pointer-events: none;
background-color: lightgrey;
}