CODEWITHSUNDEEP
angularangular-material
meblum
meblum

Reputation: 1934

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?

Upvotes: 3

Views: 6475

Answers (1)

meblum
meblum

Reputation: 1934

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.

Upvotes: 6

Related Questions