Angular 2 - How to call a typescript function inside of an addEventListener handler function?

Question

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:

addListenter() {
if (!this.addListenerFired) {
  let iterateEl = this.el.nativeElement.querySelectorAll('span');
  for (let i = 0; i < iterateEl.length; i++) {
    iterateEl[i].addEventListener('click', this.showExcerptInfo);
  }
  this.addListenerFired = true;
}
showExcerptInfo (): void {
  this.selectedExcerptId = event.srcElement.id;
  console.log(this.selectedExcerptId);
}

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:

showExcerptInfo () {
  let excerpt = this.excerptsService.getExcerpt(this.selectedExcerptId);
}

Any clues as to why this is happening and/or how it can be resolved?

Answer 1

You need to take care that this keeps pointing at the current class instance:

iterateEl[i].addEventListener('click', this.showExcerptInfo.bind(this));

alternatively you can use

iterateEl[i].addEventListener('click', (evt) => this.showExcerptInfo(evt));

Answer 2

this not pointing to your class. there is more 2 ways to do it with keeping 'this' without 'bind':

iterateEl[i].addEventListener('click', (event) => this.showExcerptInfo(event));

or:

iterateEl[i].addEventListener('click', this.showExcerptInfo);

showExcerptInfo: (any) => void = (event:any):void => {
  this.selectedExcerptId = event.srcElement.id;
  console.log(this.selectedExcerptId);
}

Answer 3

Adding further info to the accepted answer.
If you're trying to pass data from your click element to the receiving function, you can set it up as follows:

// Function 1 - add listener
element.addListener("click", this.otherFunction.bind(this, dataFromElement));

// Function 2 - receive click data
otherFunction(dataFromElement) {
   this.doStuff(dataFromElement)
}

Answer 4

import { Component, HostListener, Input, OnInit } from '@angular/core';

export class AppbarComponent implements OnInit {

   touchstartX:number = 0;
   touchstartY:number = 0;
   touchendX:number = 0;
   touchendY:number = 0;

   @HostListener('touchstart', ['$event']) gesuredZonestart(event:any) {
      this.touchstartX = event.changedTouches[0].screenX;
      this.touchstartY = event.changedTouches[0].screenY;  
   }

   @HostListener('touchend', ['$event']) gesuredZoneend(event:any) {
      this.touchendX = event.changedTouches[0].screenX;
      this.touchendY = event.changedTouches[0].screenY; 
      this.handleGesure(); 
   }

   handleGesure() {
      var swiped = 'swiped: ';
      if (this.touchendX < this.touchstartX) {
         console.log(swiped + 'left!');
      }
      if (this.touchendX > this.touchstartX) {
         console.log(swiped + 'right!');
      }
      if (this.touchendY < this.touchstartY) {
         console.log(swiped + 'down!'); 
      }
      if (this.touchendY > this.touchstartY) {
         console.log(swiped + 'top!');
      }
      if (this.touchendY == this.touchstartY) {
         console.log('tap!');
      }
   }
}

This typescript snippet will help you to implement touch gesture in angular