How to open met-menu in correct position when the opening control is created dynamically?

Question

I asked a question Is it possible to set html element in an Angular component as child of dynamically created component so that it opens mat-menu?

about adding custom control to openlayers map that opens mat-menu when clicked.

I got good answer and modified the answer to my actual needs.

.html:

<div id="mat-menu-opener" #trig="matMenuTrigger" [matMenuTriggerFor]="menu"></div>
<mat-menu #menu="matMenu" yPosition="below" xPosition="before">
  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 2</button>
</mat-menu>
<app-map-openlayers></app-map-openlayers>

.ts:

  @ViewChild('trig') menuTrigger: MatMenuTrigger;
  map: ol.Map;

  private getContextMenuControl(east: number, north: number): CustomControl {
    const element = document.createElement('div');
    element.className = 'ol-control button menu-opener';

    const pix = this.map.getPixelFromCoordinate([east, north]);
    pix[1] += -40;
    element.style.top = `${pix[0]}px`;
    element.style.left = `${pix[1]}px`;

    element.addEventListener('click', _event =>
      this.menuTrigger.toggleMenu(), false);

    return new CustomControl({ element: element });
  }

  // ... this is called when a feature on map is clicked 
  this.contextMenuControl = this.getContextMenuControl(east, north);
  this.map.addControl(this.contextMenuControl);

However clicking the custom opener control does not open the menu to correct position. It opens it to upper right corner of the map. How to open the menu by the dynamically created custom opener control?

Answer 1

I forgot that the element I create is not the element that is the actual trigger. So I need to move the trigger element to the correct place also. So it looks something like this:

  private getContextMenuControl(east: number, north: number): CustomControl {
    const element = document.createElement('div');
    element.className = 'ol-control button menu-opener';

    const pix = this.map.getPixelFromCoordinate([east, north]);
    pix[1] += -40;
    element.style.top = `${pix[0]}px`;
    element.style.left = `${pix[1]}px`;

    // get the static element from template by id
    const menu = document.getElementById('mat-menu-opener');
    if (menu !== null) {
      menu.style.display = '';
      menu.style.position = 'absolute';
      menu.style.left = element.style.left;
      menu.style.top = element.style.top;
    }

    element.addEventListener('click', _event =>
      this.menuTrigger.toggleMenu(), false);

    return new CustomControl({ element: element });
  }