ngx-mapbox-gl button click event inside a popup is not triggered

Question

I'm rending map using this angular library for mapbox ngx-mapbox-gl I'm showing a popup on mouseenter event.

mapInstance.on("mouseenter", "scoots_layers", function (e) {
  var _lat = e.lngLat.lat;
  var _lng = e.lngLat.lng;
  var coordinates = [_lng, _lat];
  this.popup = new Popup({
    closeButton: true,
    closeOnClick: true,
  });
  this.popup.setLngLat(coordinates)
    .setHTML('<button (click)="goToPage()">Hello </button>')
    .addTo(mapInstance);
});

Popup is working fine. But the click event of button is not triggered.

goToPage() { alert('say something...'); } it's inside map.component.ts — Usman Ali, May 11 '19 at 08:55
There's an answer similar to this here https://stackoverflow.com/questions/61511189/adding-a-button-to-the-popup-in-mapboxgl-js/64182029#64182029 — andy matodziextra, Oct 03 '20 at 08:09

score 2 · Answer 1 · answered May 11 '19 at 09:13

Maybe if you do it this way it works

 this.popup.setLngLat(coordinates)
.setHTML('<button  id="myBtn">Hello </button>')
.addTo(mapInstance);

});

and in your ts file

document.getElementById("myBtn").addEventListener("click", function(){
  alert('say something...');
});

ngx-mapbox-gl button click event inside a popup is not triggered

1 Answers1

Linked