title: Angular 2 - How to call a typescript function inside of an addEventListener handler function?
body: <p>I'm trying to call another typescript function (of any kind) inside of a handler function added to spans on a page. When I do this, the handler function works fine and will do basic things such as set variables, console.log, etc. However, when trying to call a function of any kind it will throw an error of 'Cannot read property functionName of undefined'. So for example, here is code that works:</p>
  
  <pre><code>addListenter() {
  if (!this.addListenerFired) {
    let iterateEl = this.el.nativeElement.querySelectorAll('span');
    for (let i = 0; i &lt; iterateEl.length; i++) {
      iterateEl[i].addEventListener('click', this.showExcerptInfo);
    }
    this.addListenerFired = true;
  }
  showExcerptInfo (): void {
    this.selectedExcerptId = event.srcElement.id;
    console.log(this.selectedExcerptId);
  }
  </code></pre>
  
  <p>However, if I change the handler function to do the following (or call any function located anywhere, even in the same component) it will not work and throws the error:</p>
  
  <pre><code>showExcerptInfo () {
    let excerpt = this.excerptsService.getExcerpt(this.selectedExcerptId);
  }
  </code></pre>
  
  <p>Any clues as to why this is happening and/or how it can be resolved?</p>