Hice una pregunta . ¿Es posible establecer un elemento html en un componente Angular como elemento secundario de un componente creado dinámicamente para que abra el menú mat?

sobre cómo agregar un control personalizado al mapa de capas abiertas que abre el menú del tapete cuando se hace clic.

Obtuve una buena respuesta y modifiqué la respuesta a mis necesidades reales.

.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);

Sin embargo, hacer clic en el control de apertura personalizado no abre el menú en la posición correcta. Lo abre en la esquina superior derecha del mapa. ¿Cómo abrir el menú mediante el control de apertura personalizado creado dinámicamente?