angularleaflettypeerrorngx-leafletmaterial-dialog

Material Dialog not open after clicking on marker in ngx-leaflet

I'm using ngx-leaflet and ngx-leaflet-draw for displaying leaflet map. I can display a marker on the map from the toolbar-marker-icon. I want to display a Material Dialog Component when I click on the marker. I can display marker coordinate on the console when I click on the marker. the code is

public onMapReady(map: L.Map) {
    map.on(L.Draw.Event.CREATED, function(e) {
      const type = (e as any).layerType,
        layer = (e as any).layer;

      if (type === 'marker') {
        const markerCoordinates = layer._latlng;
        layer.on('click', () => {
          console.log(markerCoordinates); // works properly
        });
      }
    });
  }

Then I try to modify the code for displaying Material Dialog Component but get error

import { NgZone } from '@angular/core';
import { MatDialog, MatDialogRef } from '@angular/material/dialog';
import { MaterialDialogComponent } from './m-dialog.component';
...
...
export class NgxLeafletComponent {
  dialogRef: MatDialogRef<MaterialDialogComponent>;

  public constructor(private zone: NgZone) {}

  public onMapReady(map: L.Map) {
      map.on(L.Draw.Event.CREATED, function(e) {
        const type = (e as any).layerType,
          layer = (e as any).layer;

        if (type === 'marker') {
          const markerCoordinates = layer._latlng;
          layer.on('click', () => {
            console.log(markerCoordinates); 
            this.zone.run(() => this.onClickMarker()); //error
          });
        }
      });
    }

  onClickMarker() {
    this.dialogRef = this.dialog.open(MaterialDialogComponent);
  }
 }

the error output: Error Console output

I also try this without zone.run() method, directly dialog.open() method but again caught error

Uncaught TypeError: Cannot read property 'open' of undefined

NOTE: when I try this outside onMapReady() method and without ngx-leaflet it works totally fine.

Solution

  • I got the problem and solved it. here I used regular function() on map.on(L.Draw.Event.CREATED, function(e) {...} which is not allowed another function to call. So it need to arrow function to call another method/function in it. 

    import { NgZone } from '@angular/core';
import { MatDialog, MatDialogRef } from '@angular/material/dialog';
import { MaterialDialogComponent } from './m-dialog.component';
...
...
export class NgxLeafletComponent {
  dialogRef: MatDialogRef<MaterialDialogComponent>;

  public constructor(private zone: NgZone) {}

  public onMapReady(map: L.Map) {
      map.on(L.Draw.Event.CREATED, (e) => {
        const type = (e as any).layerType,
          layer = (e as any).layer;

        if (type === 'marker') {
          const markerCoordinates = layer._latlng;
          layer.on('click', () => {
            console.log(markerCoordinates); 
            this.zone.run(() => this.onClickMarker()); //error
          });
        }
      });
    }

  onClickMarker() {
    this.dialogRef = this.dialog.open(MaterialDialogComponent);
  }
 }