[SOLVED]Issue with Leaflet Popup link (nativeElement issue)

SOLUTION: Error in the implementation code. I didn’t have self registered or linked to the popuplink.

Hello,

I have an issue with the opening of popup links in my leaflet map.
Here’s how I add the markers:

  multipleMarkersOnLeafletMap() {
    // MULTIPLE MARKERS
    // Adding mulitple markers, but none of them are linking at the moment
    // The  following code is looping all the lat and lon in the JSON file loaded in this .ts,
    // it does not discriminate what are available and not.

    console.log("multipleMarkersOnLeafletMap has been initiated")
    for (let i = 0; i < this.works.length; i++) {
      // The works that are available will appear as open, the ones that are not will appear unavailable.

      if (this.worksavailable.available[i] == true) {
        let marker = L.marker([this.works[i].latitude, this.works[i].longitude], { icon: this.workIcon })
          .bindPopup(this.works[i].title)
          .addTo(this.map);
        console.log("This is telling me if the actual works are getting the available ", this.worksavailable.available[i]);
        // This does not do anything at the moment. It is supposed to have the player click it and then while using an HTML link transfer the player to a page.
        let popuplink='<a class="merch-link" data-merchId="{{this.works[i].id}}">{{this.works[i].title}}</a>'

        marker.on('popupopen', function() {
          // add event listener to newly added a.merch-link element
           this.elementRef.nativeElement.querySelector(".merch-link")
           .addEventListener('click', (e)=>
           {
             // get id from attribute
             var merchId = e.target.getAttribute("data-merchId");
             this.goToWork(merchId)
           });
        });
      } else {
        // The same as above, just unavaialbel.
        let marker = L.marker([this.works[i].latitude, this.works[i].longitude], { icon: this.unavaialbleworkIcon })
          // The .bindPopup have a static text appearing as the content "".
          .bindPopup("Soundline")
          .addTo(this.map);
      }
    }
  }

This is called in the platform ready function on the page.

The error I’m getting is this:

ERROR TypeError: Cannot read property 'nativeElement' of undefined
    at NewClass.<anonymous> (home.ts:188)
    at NewClass.fire (leaflet-src.js:593)
    at NewClass.onAdd (leaflet-src.js:9583)
    at NewClass._layerAdd (leaflet-src.js:6531)
    at NewClass.whenReady (leaflet-src.js:4398)
    at NewClass.addLayer (leaflet-src.js:6593)
    at NewClass.openPopup (leaflet-src.js:9793)
    at NewClass.openPopup (leaflet-src.js:9901)
    at NewClass._openPopup (leaflet-src.js:9976)
    at NewClass.fire (leaflet-src.js:593)

Any ideas on what’s wrong?