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.

Answer 1

As the comment 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