Close Angular Material mat-select multiselect with a button click?

Question

I would like to have a multi-select dropdown menu where the user clicks an "apply" button (which is lives in the drop down) to close the menu. Using Angular Material and mat-select, is there a way to do this?

I'be already tried adding a close method to the button, but I get a lot of console errors, including "control.registerOnDisabledChange is not a function" and, after clicking, "control.markAsTouched is not a function"

 <mat-form-field>
    <mat-select #toppings placeholder="Toppings" [formControl]="toppings" multiple>
      <mat-option *ngFor="let topping of toppingsList" [value]="topping">{{topping}}</mat-option>
      <button (click)="toppings.close()">Apply</button>
    </mat-select>
  </mat-form-field>

The list does close, but with the resulting console errors.

Aside from dangerous naming (the input and formControl both have the name "toppings"), you need set up your reactive form properly. The issue is not with the button, but with [formControl]="toppings" stackoverflow.com/questions/41474011/…. You may wish to use a FormGroup and access the formControlName in your template. — Nathan Beck

Haijin Haijin · Accepted Answer · 2019-02-15T22:19:54

As the commend mentions, there's naming collision. This works.

<mat-select #sl placeholder="Toppings" [formControl]="toppings" multiple>
        <mat-option *ngFor="let topping of toppingsList" [value]="topping">{{topping}}</mat-option>
        <button (click)="sl.close()">Apply</button>
    </mat-select>

Stackblitz https://stackblitz.com/edit/angular7-material-primeng-template-1-hwuq4p?file=src%2Fapp%2Fapp.component.ts

Close Angular Material mat-select multiselect with a button click?

1 Answers