Button inside Mapbox popup not executing function

user_10843327 0
Viewed 1325

I am trying to open a modal when a button inside of a Mapbox popup is clicked. The HTML is rendering properly but I'm not sure as to why the function is not being executed.

let marker = new mapboxgl.Marker(el);
    try {
        marker.setLngLat([eventInfo.location[0], eventInfo.location[1]])
            .setPopup(new mapboxgl.Popup({offset: 32})
                .setHTML('<ion-button (click)="logger()">View Full</ion-button>'))
            .addTo(this.map);
    } catch (e) {
        console.log(e.message);
    }

Above is how I create the marker and attach a popup. logger() is the function that I expect to be executed.

logger(){
  console.log('hi');
}
mapbox-marker mapbox-gl-js ionic4 angular javascript
1 Answers

I don't know anything about Ionic works, but my guess is you can't just pass Ionic HTML elements (<ion-button>) to setHTML and expect it to get the full Ionic treatment. (That's the case with React and Vue for instance.)

One solution would be to write conventional raw HTML in the setHTML:

.setHTML('<button id="view-full">View Full')
.addTo(this.map);

document.getElementById('view-full').addEventListener('click', logger)

Alternatively there might be some step to pass your HTML through Ionic to get it to behave as you expect.

user_2632680
Related