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

Question

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?

You should be able to use it on its own. What exactly are you asking? — Edric
– Edric, Commented Oct 31, 2020 at 18:51
@Edric Right, but I want it to be styled nicely, it should look like a button. — meblum
– meblum, Commented Nov 1, 2020 at 1:48

meblum · Accepted Answer · 2020-10-29 16:41:25Z

6

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

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

answered Oct 29, 2020 at 16:41

meblum

1,9741 gold badge16 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Zen Over a year ago

Do yourself a favor and just use the mat-menu

Jasper Over a year ago

@Zen if you want to allow the user to select multiple options, it's more straightforward to use mat-select since this component natively supports that feature.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related