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

user_10704601 0
Viewed 1417

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?

angular-material angular
1 Answers

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.
user_107046010
Related