Search code examples
angularleafletangular6angular-material-6ngx-leaflet

Material Dialog gets stuck when called onClick of leaflet Marker

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.

Solution

  • 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