<div class="row no-overflow">
<div class="col-md-1 window-pad-height">
<mat-label> Opportunity 1: </mat-label>
</div>
<div class="col-md-2 no-overflow">
<mat-form-field class="no-overflow">
<mat-select placeholder="select" [(ngModel)]="oppurtunityOne" [disabled]="selectedRankingCriteria.viewValue!=='Custom'">
<mat-option *ngFor="let op1 of OppurtunityList" [value]="op1">
{{op1.viewValue}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
<div class="row no-overflow">
<div class="col-md-1 window-pad-height">
<mat-label> Opportunity 2: </mat-label>
</div>
<div class="col-md-2 no-overflow">
<mat-form-field class="no-overflow">
<mat-select placeholder="select" [(ngModel)]="oppurtinityTwo" [disabled]="selectedRankingCriteria.viewValue!=='Custom'">
<mat-option *ngFor="let op of OppurtunityList" [value]="op" [disabled]="oppurtunityOne.viewValue">
{{op.viewValue}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
<div class="row no-overflow">
<div class="col-md-1 window-pad-height">
<mat-label> Opportunity 3: </mat-label>
</div>
<div class="col-md-2 no-overflow">
<mat-form-field class="no-overflow">
<mat-select placeholder="select" [disabled]="selectedRankingCriteria.viewValue!=='Custom'">
<mat-option *ngFor="let op3 of OppurtunityList" [value]="op3">
{{op3.viewValue}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
<div class="row no-overflow">
<div class="col-md-1 window-pad-height">
<mat-label> Opportunity 4: </mat-label>
</div>
<div class="col-md-2 no-overflow">
<mat-form-field class="no-overflow">
<mat-select placeholder="select" [disabled]="selectedRankingCriteria.viewValue!=='Custom'">
<mat-option *ngFor="let op4 of OppurtunityList" [value]="op4">
{{op4.viewValue}}
</mat-option>
</mat-select>
</mat-form-field>
<button mat-raised-button color="primary">View</button>
</div>
</div>
JSON DATA
OppourtunitiessList: any[] = [
{ value: 'col-1', viewValue: 'datatoDisplay1' },
{ value: 'col-2', viewValue: 'datatoDisplay2' },
{ value: 'col-3', viewValue: 'datatoDisplay3' },
{ value: 'col-4', viewValue: 'datatoDisplay4' },
{ value: 'col-5', viewValue: 'datatoDisplay5' },
{ value: 'col-6', viewValue: 'datatoDisplay6' },
{ value: 'col-7', viewValue: 'datatoDisplay7' },
{ value: 'col-8', viewValue: 'datatoDisplay8' },
{ value: 'col-9', viewValue: 'datatoDisplay9' }
];
How to disable a selected option from the dropdown using TypeScript?
What logic should I implement here to disable the selected option?
Is it possible to handle this using ngModel?