Angular mat-select close selection panel after first select

Question

Using angular material mat-select multiple, what's the way to close selection panel after the first selection?

By default mat-select multiple keep selection panel open to select more options, i need to close after the first selection.

API expose a toggle and close methods to do this, but i need do this from typescript in component.

https://stackblitz.com/edit/angular-material-multiple-selection?file=app/app.component.ts

Answer 1

first, is it necessity to use multi attribute with mat-select component? Judging by question description, you have to remove it.

If you still need to see checkboxes by using multi but have behavior like single select component, so I can give you my variant.

Code is here - https://stackblitz.com/edit/angular-material-multiple-selection-v7a9kr

I just set link to <mat-select> in template, and in class added call of

this.searchUserForm.valueChanges.subscribe(() => {
    this.select.close();
});

Close method you can find here - https://material.angular.io/components/select/api

I hope my answer was useful for you.