xPosition not working for cdkMenu in angular

Question

I just refactoring my code from matMenu to cdkMenu and explore that xPosition='before' won't work anymore.

I also read the documentation but didn't find how can I position cdkMenu if you have any experience with this case please help me :)

Answer 1

you can use cdkMenuPosition on the element with cdkMenuTriggerFor directive

cdkMenuPosition takes an array of ConnectionPositionPairs, to achieve the before effect on the menu set the ConnectionPositionPair as below

<button [cdkMenuTriggerFor]="menu" class="example-standalone-trigger" [cdkMenuPosition]="positions">Click me!</button>

positions = [
  new ConnectionPositionPair(
    { originX: 'end', originY: 'bottom' },
    { overlayX: 'end', overlayY: 'top' }
  ),
];

you can look at this answer for more info in Global Position Strategy

https://material.angular.io/cdk/menu/api#CdkMenuTrigger