Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 634
Joniras Avatar asked Aug 07 '18 18:08

Joniras


1 Answers

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

like image 195
Jscti Avatar answered Oct 24 '22 06:10

Jscti