Angular 材料多 select 获取隐藏的选定值

Question

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

Answer 1

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.

Answer 2

Adding Formcontrol variable like below we can enumerate the selected items from a angular multiselect dropdown

 <mat-select multiple placeholder="Reason" [formControl]="selectedReasons">
        <mat-option value="option1">option1</mat-option>
        <mat-option value="option2">option2</mat-option>
        <mat-option value="option3">option3</mat-option>
        <mat-option value="option4">option4</mat-option>
      </mat-select>

TS

 selectedReasons = new FormControl();

  reasonDropdownChangeEvent(event: any) {
console.log(this.selectedReasons.value.toString());

}