Is it possible to get mat-menu opened position?

Issue

Could someone help me to detect a position of an opened menu? I need to apply styles for different position behavior. I've got a problem when there is no space to expand below it automatically expands above, how can I detect, that my menu items changed their position?

Thanks in advance!

Solution

thanks @Dakopatel for advice!

in html I've added #mainTrigger and #menuItems to get element refs:

<div class="flex align-center space-between"
   [matMenuTriggerFor]="dropdownMenu"
   #trigger="matMenuTrigger"
   (click)="getMenuPosition($event)"
   (menuClosed)="above = false;"
   #mainTrigger> 
</div>
<mat-menu #dropdownMenu="matMenu" class="drop-list">
<div class="menu-panel" #menuItems>
 // some for function here
</div>

in componet:

@ViewChild('menuItems') menuItems: any;
@ViewChild('mainTrigger') mainTrigger: ElementRef;
above: boolean;
@HostListener('window:resize', ['$event'])
getScreenSize(event?) {
  this.getMenuPosition();
}

constructor() {
   this.getScreenSize();
}

getMenuPosition() {
 setTimeout(() => {
    const main = this.mainTrigger.nativeElement.getBoundingClientRect();
    const child = this.menuItems.nativeElement.getBoundingClientRect();
    this.above = main.y > child.y;
   }, 100);
 }

Answered By - MargeKh