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.
The reason is that you're trigerring the opening of the modal outside of the "Angular World" because it is tied to a click
event 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