title: Leaflet- marker click event works fine but methods of the class are undefined in the callback function
body: <p>I'm using the following code to add a callback function to the <code>click</code> event for some leaflet markers (of which I do not know the number a priori):</p>
  
  
  
  <pre class="lang-js prettyprint-override"><code>newArray.forEach(p =&gt; {
    let marker = L.marker(latLng).on('click', this.markerClick).addTo(newMap)
    marker.bindPopup(content)
    marker.addTo(newMap)
    marker.openPopup()
  })
  </code></pre>
  
  <p>And in the class there is the function <code>markerClick</code> that does this:</p>
  
  <pre class="lang-js prettyprint-override"><code>markerClick(e) {
    console.log("Inside marker click " + e.latlng.lat + "  " + e.latlng.lng)
    this.displayError("You clicked on the marker")
  }
  </code></pre>
  
  <p>The <code>console.log</code> is printing correctly the values of <code>lat</code> and <code>lng</code> of the marker, but when calling <code>displayError</code> a runtime error is thrown saying that:</p>
  
  <blockquote>
    <p>this.displayError is not a function</p>
  </blockquote>
  
  <p>This is a function declared in class that I use to show a toast with a custom message, accordingly to what I need.  This is the code:</p>
  
  <pre class="lang-js prettyprint-override"><code>displayError(messageErr: string) {
    let toast = this.toastCtrl.create({
      message: messageErr,
      duration: 3000,
      position: 'top'
    });
    toast.present();
  }
  </code></pre>
  
  <p>Why is saying that is not a function?</p>
  
  <p>EDIT: it is not just <code>displayError</code>, every function of the class gives this message.</p>