Angular disabled if selected-CodePudding

Is there a way that I can Hide/Disable/*ngIf a <mat-option> in my <mat-select> tag if the option is selected. My user should not be able to unselect an option if it is already selected but they may select new options.

<mat-select [(ngModel)]="selectedBrands" [ngModelOptions]="{standalone: true}" required multiple>
            <mat-option>None</mat-option>
            <mat-option *ngFor="let brand of brands" [value]="brand">{{brand.name}}</mat-option>
          </mat-select>

CodePudding user response：

Stackblitz

Added [disabled]="selectedBrands.indexOf(brand) > -1" to option tag

<mat-form-field>
  <mat-select
    [(ngModel)]="selectedBrands"
    [ngModelOptions]="{ standalone: true }"        
    required multiple
  >
    <mat-option
      *ngFor="let brand of brands"
      [value]="brand"
      [disabled]="selectedBrands.indexOf(brand) > -1"
      >{{ brand.name }}
    </mat-option>
  </mat-select>
</mat-form-field>