CODEWITHSUNDEEP
angularangular-materialmaterial-designmulti-select
Md. Parvez Alam
Md. Parvez Alam

Reputation: 4596

Angular material multi select get selected value on hide

Scenario :

Todo :

Upvotes: 3

Views: 6822

Answers (2)

rajquest
rajquest

Reputation: 711

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

}

Upvotes: 0

Abhishek Kumar
Abhishek Kumar

Reputation: 2539

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.

Upvotes: 7

Related Questions