Open a Angular Material Dialog after an leaflet on("click", function()) action

Question

I want to open an Angular Material Dialog when I click on a leaflet circle. The Dialog appears but with strange behavior. This strange behavior doesn't appear when I open the Dialog with a normal Button (click) event.

I try to call the function like this. I bind an onClickCircles function to my circle.

let line = L.circle(latlngEx, { radius: this.circles[i].radius }).on(
          "click",
          this.onClickCircles.bind(this)
        );

and when the circle is pressed I open the dialog

onClickCircles(e) {
    const dialogRef = this.dialog.open(MarkerdetailComponent, {
      width: "300px",
      data: { event: e, collection: "circles" }
    });
    dialogRef.afterClosed().subscribe(result => {
      console.log("closed")
    });
    //this.deleteCircles(e.target);
  }

When call onClickCircle(e) from anywhere else, it works fine. I guess because .bind(this) instantiates my component again and it hast to load the whole component before the dialog appears correct. But I am not sure of this and don't know if there is a work around.

Answer 1

This Error happens because the code inside the click function is not executed in an Angular context. It can be fixed by using NgZone.

let line = L.circle(latlngEx, { radius: this.circles[i].radius }).on(
          "click",
          e => {
            this.zone.run(() => {
              this.onClickCircles(e)
              })
          }
        );