0

I am trying to hide an option in mat-select only when aria-expanded is false..

I have an option for "Select All" and "Deselect All" My problem is, when closed, it shows "Deselect All"

aria-expanded = true

When closed:

When aria-expanded = false

Is there an easy way to remove the option "Deselect All" from the closed state?

Dennis
  • 31
  • 3
  • Could you share some code details to help you. And did you try it https://material.angular.io/components/select/overview#select-reset ? – Nikita Feb 24 '23 at 12:15

2 Answers2

0

Add mat-option without value

<mat-option>None</mat-option>

then can listen to selectionChange

(selectionChange)=change($event)

and clean selected values, when None is selected (value=undefined)

change(event) {
 console.log('Event: ', event.value);
 if (event.value.indexOf(undefined) != -1) {
   this.toppings.setValue('');
 }
 console.log(this.toppings.value);
}

Demo https://stackblitz.com/edit/angular-zn6jez?file=src/main.ts

Nikita
  • 682
  • 2
  • 13
0

I came up with this:

<mat-select aria-expanded="false">
  <mat-option value="1" id="select">Select All</mat-option>
  <mat-option value="2">Option 2</mat-option>
</mat-select>

<style>
  mat-select[aria-expanded="false"] #select {
    display: none;
  }
</style>
Dennis
  • 31
  • 3