aratcliffe / Leaflet.contextmenu

A context menu for Leaflet.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Angular support ?

David-Nachimov opened this issue · comments

does it have support for the angular 2 and above ? the examples dont show very good use of this

Hi, I don't use Angular myself so can't say whether it will work with it or not.

Duplicate of #121

Hi, it's working fine in Angular 9 (probably in Angular 2+ in general).
Try the following steps:

  1. Install plugin package in your Angular project: npm install leaflet-contextmenu (or globally)
  2. Import the plugin in your Angular component or service: import 'leaflet-contextmenu';
  3. Import plugin's css into your project's styles file (styles.scss)
    @import "~leaflet-contextmenu/dist/leaflet.contextmenu.css";
  4. Use the plugin as described in the main page, except from callback.

In order to be able to call angular methods, you have to use arrow functions for callback argument.
instead of:
{ text: 'Center map here', callback: centerMap }
you have to write
{ text: 'Center map here', callback: (e) => { this.centerMap(e); }}

...

private centerMap(e) { map.panTo(e.latlng); }

The arrow function gives you access to Angular context in order to be able to call your methods / variables.

could you plz share this reference code with angular 9......it will helpful to understand code flow.
thanks

isn't there a @type to install?
cause it isn't working for me

image

image