Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Angular support ? #126

Open
David-Nachimov opened this issue Jan 21, 2020 · 5 comments
Open

Angular support ? #126

David-Nachimov opened this issue Jan 21, 2020 · 5 comments

Comments

@David-Nachimov
Copy link

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

@aratcliffe
Copy link
Owner

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

@jelhan
Copy link
Contributor

jelhan commented Mar 7, 2020

Duplicate of #121

@socmath
Copy link

socmath commented May 2, 2020

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.

@swapnasheela12
Copy link

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

@GhadaAjimiDblog
Copy link

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

image

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants