CODEWITHSUNDEEP
javascriptangularionic4mapbox-gl-jsmapbox-marker
Sree Grandhe
Sree Grandhe

Reputation: 429

Button inside Mapbox popup not executing function

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');
}

Upvotes: 3

Views: 2030

Answers (1)

Steve Bennett
Steve Bennett

Reputation: 126537

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.

Upvotes: 2

Related Questions