I was working on a project involving mat-select. I have two mat-selects,there I want to do two things: When I select 'all' option in either of the mat-selects all the other options should get disabled. When I select an option in one mat-select,that option needs to get disabled in the other mat-select This is the stackblitz link of the project

How to disable options from mat-select based on option selected?

I was working on a project involving mat-select. I have two mat-selects,there I want to do two things:

When I select ‘all’ option in either of the mat-selects all the other options should get disabled.
When I select an option in one mat-select,that option needs to get disabled in the other mat-select This is the stackblitz link of the project

Thanks in advance, for the help

Answer

Use this in you second optiongroup

<mat-optgroup *ngFor="let group of testList" [label]="group.displayName">
  <mat-option *ngFor="let num of group.pokemon; let i = index"
  [value]="num"
  disabled="{{ include.includes(num) || include.includes('all') }}"
  >
    {{ num }}
  </mat-option>
</mat-optgroup>

Advertisement

Answer