How to remove or hide mat-option after selection in mat-select

klaydze 0
Viewed 26

I have this table using mat-table and I'm adding a dynamic row on it by clicking a button. One of the column of the said table has a drop down using mat-select with a static mat-option. Please visit this stackblitz for my sample reproduction of my table.

My primary goal is to hide the item that I already selected previously.

enter image description here

Hope you can guide me on how to implement this.

Thanks!

mat-select angular-material-table angular-material angular
1 Answers

Create a method to get the filtered services in your component something like

getServices(selectedService){
   let selecteServices:any[]=this.form.value?.servicesArr?.map(s=> s.services)||[];
   return this.services.filter(s=> s == selectedService || selecteServices.every(sv=> sv != s))
}

Then use this method to fetch filtered services from UI

 <mat-select #ser formControlName="services" (selectionChange)="onSeviceChange($event, element)">
              <mat-option *ngFor="let service of getServices(ser.value)" [value]="service">
                {{ service }}
              </mat-option>
 </mat-select>

Working demo

jitender0
Related