Angular material multi select get selected value on hide

3
votes

Scenario :

  • I have a filter in angular material multi-select

Todo :

  • I want to get the selected values on hide of dropdown..

    I googled and tried to find the doc but could not found any ref to add hide event to miltiselect

1
angularangular-materialmaterial-designmulti-select
can you please add more details on what you're trying to achieve? or include a stackblitz sample of your code? – Roj

1 Answers

6
votes

Demo where multi-select values are available after closed mat-select dropdown

Application Code : https://stackblitz.com/edit/angular-values-access-after-dropdown-close?file=src/app/app.component.html

Approach :

  • Keep a variable to store multi-select values.
    Use openedChange event as (openedChange)="comboChange($event)", and in that store the selected values into an array or a different variable.
    Event value is false if dropdown is closed, so i have used it in the demo code.
  • Also, mat-select is used with [formControl]="toppings", so in any other method, you can access its value using this.toppings.value, it will return an array with selected values.