How to make select dropdown readonly or disabled conditionally in angular?

Question

I am using Angular7 and I want to make select element readonly or disabled conditionnaly.

For readonly I tried:

  editable: boolean = true;  

And the template:

 <select  #listOfOptions="ngModel" [(ngModel)]="myList" [readonly]="!editable" class="form-control">
    </select> 

This causes:

Error: Template parse errors: Can't bind to 'readOnly' since it isn't a known property of 'select'.

There is an issue about this, no solutions yet!

For disabled I tried:

<select [attr.disabled]="!editable">
...
</select>

It is always disabled, no matter how I set the editable variable.

Thank you for help.

Answer 1

You should use disabled instead of attr.disabled

<select [disabled]="!editable">
...
</select>