Search code examples
javascriptangulartypescriptangular-materialmat-select

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:

  1. When I select 'all' option in either of the mat-selects all the other options should get disabled.
  2. 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


Solution

  • 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>