Can't open the menu from another event.

[bayismet]

Hello there!

I'm trying to do something different that fits my project. I have map and markers on it. I need to open that menu, when I click a marker. That's how I try so far: main.component.html

<div id="div1" class="map" >
    <yaga-map id="map1" style="height: 500px" [zoom]="zoomLevel" [lat]="lat" [lng]="long" [minZoom]="4" [maxZoom]="16">
        <div id="marker1" [contextMenu]="basicMenu" [contextMenuSubject]="ismet">0
            <yaga-marker [lat]="lat" [lng]="long" >
                <yaga-icon [iconUrl]="'./assets/markers/blueMarker.png'" [iconSize]="[41, 41]" [iconAnchor]="[13, 41]">
                </yaga-icon>
                <yaga-popup>This is the content of the popup</yaga-popup>
            </yaga-marker> 
        </div >
        <yaga-tile-layer [url]="'http://a.tile.openstreetmap.org/{z}/{x}/{y}.png'"></yaga-tile-layer>
    </yaga-map>
</div>

<context-menu>
    <ng-template contextMenuItem (execute)="showMessage('K')">Say K!</ng-template>
    <ng-template contextMenuItem (execute)="showMessage('E')">Say E!</ng-template>
    <ng-template contextMenuItem (execute)="showMessage('N')">Say N!</ng-template>
    <ng-template contextMenuItem (execute)="showMessage('O')">Say O!</ng-template>
    <ng-template contextMenuItem (execute)="showMessage('B')">Say B!</ng-template>
    <ng-template contextMenuItem (execute)="showMessage('I')">Say I!</ng-template>
</context-menu>

main.component.ts

import { OSM_TILE_LAYER_URL, LeafletEvent } from '@yaga/leaflet-ng2';
import { Component, ViewChild } from '@angular/core';
import { ContextMenuComponent } from 'ngx-contextmenu';
import { ContextMenuService } from 'ngx-contextmenu';
@Component({
  selector: 'app-main',
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.css']
})
export class MainComponent {
  constructor(public contextMenuService: ContextMenuService) { }
  public items = [
    { name: 'John', otherProperty: 'Foo' },
    { name: 'Joe', otherProperty: 'Bar' }
  ];
  @ViewChild(ContextMenuComponent, { static: true }) public basicMenu: ContextMenuComponent;

  // Your logic here, like:
  public tileLayerUrl: string = OSM_TILE_LAYER_URL;
  zoomLevel = 12;
  lat = 40.14799;
  long = 18.0609717;
  public handleEvent(event: LeafletEvent): void {
    console.log(event);
  }

  showMessage(event, item) {
    console.log(event.target);
    this.contextMenuService.show.next({
      // Optional - if unspecified, all context menu components will open
      contextMenu: this.basicMenu,
      event: event,
      item: item,
    });
    // if (event.target.localName) {
    //   console.log('You clicked a ' + event.target.localName + ' element with ' + event.target.id + ' id!');
    // }
  }

}

When I give that [contextMenu] property to the map itself, it opens everywhere the same menu. I need to open a menu on marker click, and another menu for everywhere else.

Hope I'm clear and get an answer soon. Thanks!

[muziol]

You pass as contextMenu the [contextMenu]="basicMenu" but you don't assign to <context-menu>. This propably fix this: <context-menu #basicMenu>

[bayismet]

Actually, I'm using just one menu so I thought I could pass that. I just realized that the problem is caused by the map library. I changed my map from "yaga" to "agm", so it works now!

Although it gave me some error inside "this.contextMenuService.show.next()" block about "event". I just dealt with it like this:

showMessage(marker) {
    localStorage.setItem('markerID', marker.id);
    this._ContextMenuService.show.next({
      // Optional - if unspecified, all context menu components will open
      contextMenu: this.basicMenu,
      event: new MouseEvent('markerRightClick'),
      item: marker,
      anchorElement: document.getElementById('marker1')
    });
  }

Hope anyone can understand and solve their problem too!