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);
}