10

I have a project where i have a map (using ngx-leaflet ).
On click on a marker i want to show a Dialog from Angular Material.

The Dialog opens but when i click on the close button, it reopens again and then closes.

What i tried:

  • Delaying the dialog with Timeout
  • Firing a Subject which opens the dialog
  • Deleting and creating a new Dialog
  • Searching for this error in the issues of ngx-leaflet as well as angular-material

What i found out:

  • All Lifecycle Hooks are triggered after something happens (a click, a js event behind, anything)
  • The Dialog can be simple as i want, it does not change anything
  • When i open the dialog again when it got closed (in afterClosed of Dialog) it works normally

Further Explanation of Example Code:

  • In App.component.ts i bind an eventhandler to every marker which then opens the dialog in another function
  • The code is a fork of this project i found on the net (just with updated dependencies)

Demo

I made a demo here: Example Project.

2
  • 1
    as per my understanding after saw your code, you need to declare two different function for handle open dialog and addmarker Because addmarker is already call at onMapReady so when user click on marker you have to call other function for opendialog instead of addmarker meanwhile, i am trying to resolve your problem Commented Aug 8, 2018 at 7:34
  • removing addmarker from onMapReady does not solve the problem. when user clicks on marker i already call another function: openExampleDialog . I tried to open the dialog with: m.addEventListener("click",this.openExampleDialog.bind(this)); does not work either...
    – Joniras
    Commented Aug 8, 2018 at 7:44

1 Answer 1

11
+50

The reason is that you're trigerring the opening of the modal outside of the "Angular World" because it is tied to a clickevent on a google map marker. Then you have these type of inconsistencies.

2 solutions :

  • Use agm-map lib that will angularify google map APIs
  • Keep using directly google map APIs but add NgZone to explicitely tell that you want to execute some code back inside the angular world :

m.addEventListener("click", ()=> { this.zone.run(() => {this.openExampleDialog();}) })

Working fiddle here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.