Disabling mat-select in Angular

Question

I have a dropdown. I want to disable the entire mat-select when the selected value is Uber . Otherwise, it needs to be enabled.

<mat-label>DB Property Name</mat-label>

<mat-select class="dBProperty"  name="dbpropertyName{{i}}" [(ngModel)]="mappingObj.dbpropertyName" [disabled]="selectedValue=='**Uber**'?'disabled':'null'" required>

<mat-option *ngFor="let options of dBPropertyArray" [value]="options.dBProperty" >{{options.dBProperty}}
                                                    </mat-option>

                                                </mat-select>

How can I achieve it..? This is my code. where am I going wrong?

Answer 1

use disabled attribute for that.

<mat-select 
    class="dBProperty" 
    name="dbpropertyName{{i}}" 
    [(ngModel)]="mappingObj.dbpropertyName"
    [disabled]="mappingObj.dbpropertyName=='Uber'"
    required>

    <mat-option *ngFor="let options of dBPropertyArray" [value]="options.dBProperty">{{options.dBProperty}}
    </mat-option>

</mat-select>

Answer 2

The below change will fix your issue. disabled property accepts boolean values. If true its disabled else enabled.

[disabled]="selectedValue=='Uber'"