Angular mat menu position

0
votes

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

1
angular
Question not clear. What is the issue? Is see it opens already to the left. – emmbee
hi..what i want is..after i click menu...item 1 item 2 item 3 open directly. right now is after i click menu..hover mouse in Item 1 and then Item 2 show. i dont want it like that. – Laure

1 Answers

0
votes

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.