Add component to ngx-leaflet marker popup

Question

How is it possible to bind a custom component to the ngx-leaflet popup? For example, I want to render a custom element <my-card></my-card> in a popup that when I click on it my component is rendered and not the standard popup from the leaflet.

Answer 1

I will suggest you to install latest version of ngx-leaflet and ngx-leaflet-draw. i am trying to focus on code. just see this, I think it will help you

// First install all dependencies
npm install leaflet
npm install leaflet-draw
npm install @asymmetrik/ngx-leaflet
npm install @asymmetrik/ngx-leaflet-draw

npm install --save-dev @types/leaflet
npm install --save-dev @types/leaflet-draw

import { NgZone } from '@angular/core';
import { MatDialog, MatDialogRef } from '@angular/material/dialog';
import { MaterialDialogComponent } from './m-dialog.component';
import * as L from 'leaflet';
...
...
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);
  }
 }