ngx-leaflet map zoom events not triggering

Question

As per ngx-leaflet documentation link (leafletMapMoveEnd) and (leafletMapZoomEnd) are both exposed events.

I'm assuming that these events are exposed in the same DOM that the map is Initialized, and should be implemented like this:

<div 
 leaflet
 [leafletOptions]="options"
 (leafletMapReady)="onMapReady($event)"
 (leafletMapMoveEnd)="onMapMove($event)"
 (leafletMapZoomEnd)="onMapZoom($event)">

Is this the correct way to catch these events?

(leafletMapReady) seems to be working just fine.

However neither (leafletMapZoomEnd) or (leafletMapMoveEnd) seem to be triggering when I mess with the map it self.

I tried panning the map, as well as zooming in and out. Neither of those interactions cause the handleMapZoomEnd($event) handleMapMoveEnd($event) methods to be hit.

import { Component, Input, OnChanges, OnInit, Output, EventEmitter } from '@angular/core';
import * as fromLeafLet from 'leaflet'; 
import 'leaflet.markercluster';

@Component({
  selector: 'map',
  templateUrl: './map.component.html',
  styleUrls: [
    './map.component.css',
    './extra-marker-icon.css'
  ]
})
export class MapComponent implements OnInit, OnChanges {
 constructor(){}

 onMapReady(map: fromLeafLet.Map): void {
    this.map = map;
  }

  onMapZoom(event: any):void{
    console.log('Zoom');
    this.onMapDirty.emit();
  }

  onMapMove(event: any):void{
    console.log('Move');
    this.onMapDirty.emit();
  }
}

Answer 1

In the Github repo for the @asymmetrik/ngx-leaflet ngcli tutorial, I added a branch demo/events that shows a really simple example of using the zoom/move events.

git clone [email protected]:Asymmetrik/ngx-leaflet-tutorial-ngcli.git
git checkout demo/events

The files of interest are:

./src/app/app.component.html
./src/app/app.component.ts

The template (below) contains two handlers, one for each of the leafletMapMoveEnd and leafletMapZoomEnd outputs:

<div class="map"
  leaflet
  [leafletOptions]="options"
  (leafletMapReady)="onMapReady($event)"
  (leafletMapMoveEnd)="handleMapMoveEnd($event)"
  (leafletMapZoomEnd)="handleMapZoomEnd($event)"
></div>

The component (below) just prints to the console on these events. I removed mostly everything that's not necessary to demo the events working.

import { Component } from '@angular/core';
import * as L from 'leaflet';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: [
    './app.component.css'
  ]
})
export class AppComponent {

  streetMaps = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    detectRetina: true,
    attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
  });


  map: L.Map;

  options = {
    layers: [ this.streetMaps ],
    zoom: 7,
    center: L.latLng([ 46.879966, -121.726909 ])
  };

  onMapReady(map: L.Map): void {
    this.map = map;
  }

  handleMapZoomEnd(map: L.Map):void{
    console.log('onMapZoomEnd');
  }

  handleMapMoveEnd(map: L.Map):void{
    console.log('onMapMoveEnd');
  }
}