How to position material menu in Angular?

Question

I have a button at the top right corner in my top navbar. That button simply opens up a mat menu. I want to open that mat menu at a specific position, say at the middle of the screen, how do I go about it?

I have tried this snippet of code below in the menuOpened() and button's onClick() method, nothing seems to be working and the top, height, width, etc are being overwritten when I open the mat menu.

menuOpened() {
        console.log('Menu is open');
        var x: HTMLElement = document.querySelector("div.cdk-overlay-connected-position-bounding-box");
        console.log(x);
        x.style.left= "50%";
        x.style.top= "50%";
        console.log(x.style.top);
        console.log(x);
      }

Answer 1

According to Angular Material's documentation:

The position can be changed using the xPosition (before | after) and yPosition (above | below)

So position can only be changed to an immediate area around the element that creates it.

You may be interested in dialogs. They allow full control over the position in which they are created.

Answer 2

According to the docs, MatMenu has following input:

@Input('class')
panelClass: string

You can try something like

<mat-menu #menu="matMenu" [class]="'your-class'">
    <button mat-menu-item>Item 1</button>
    <button mat-menu-item>Item 2</button>
</mat-menu>

Please note, that with default ViewEncapsulation setting .your-class in your component's CSS/SCSS file will not work. You need to either set component's encapsulation to ViewEncapsulation.None (I wouldn't recommend that approach as it makes your component styles affect other elements), use ::ng-deep (ref) or add the styles to styles.scss.