Angular material multi select get selected value on hide

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.

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());

}