Angular - leaflet marker event to open modal component

Question

l use leaflet with angular and i would like to make click addEventListener on marker for open modal component . But the problem is while i run my code below , the addEventListener is open the modal component without i click on marker .

        let m =  new L.Marker([33, 44], {
          icon: new L.DivIcon({
            className: 'my-div-icon',
            html: `
            <div>
           <img src="${f[1].weather_status_icon_ar}"/style="width: 30px;height: 
           30px;">
           </div>`

          })

}).addEventListener('click',this.navigate(this.LocationID)).addTo(this.weather)

Modal component

    async navigate(LocationID) {
    const modal = await this.modalController.create({
      component: WeatherDetailsPage,
    });

    await modal.present();
  }

l want to open modal component manually via marker click not automatic

Answer 1

That's expected, since you call this.navigate(this.LocationID), which opens a modal, and pass the value returned by this function call to addEventListener.

I.e. your code is equivalent to:

const result = this.navigate(this.LocationID);
....addEventListener('click', result)

You shouldn't call this function. You should instead pass to addEventListener() a function that would call this function:

addEventListener('click', () => this.navigate(this.LocationID))