How to use angular material select with a button (without form field)

问题

I would like to use the angular material mat-select component without the mat-form-field, I want it to be conceptually similar to the native select element. Is there a way to achieve that?

回答1:

A simple approach is to use a mat-menu and update the trigger on button-click.

demo using mat-menu component.

If you don't want to use a menu but a mat-select, here is a solution which uses the select component and also ensures the panel is positioned properly when opened:

demo using mat-select component

1. insert the select in a button component.
2. position and size the select to cover the button.
3. make the select opacity 0 so it's not seen.
4. call the open() method on button click.

来源：https://stackoverflow.com/questions/64595515/how-to-use-angular-material-select-with-a-button-without-form-field