CODEWITHSUNDEEP
angular
Laure
Laure

Reputation: 33

Angular mat menu position

Hi i would like to have a mat-menu open to the left.

i got some scratch code in stackblitz, here is the link

https://stackblitz.com/edit/angular-material-menu-position-aside-6ab669?file=src/app/menu-overview-example.html

the structure should like this Menu -> Item 1 Item 2 Item 3

or the oppposite direction Item 1 Item 2 Item 3 <- Menu

any ideas? thanks

Upvotes: 0

Views: 904

Answers (1)

meblum
meblum

Reputation: 1944

The matMenuTrigger exposes an openMenu() function that can be called to open the menu programmatically.

stackblitz demo

So to achieve the desired effect:

  1. listen to the menuOpened event of the main trigger,
  2. when main trigger opens, call openMenu() on the sub-trigger.

The only issue is, that since the sub-trigger will open before the parent has finished animating, it will not position properly. So:

  1. use the setTimeout function to delay the opening of the sub-trigger.

Upvotes: 0

Related Questions