Angular 2 & Typescript: Cannot access class instance from event handler

Question

My use case requires me to add several copies of a child component to a template programmatically (think: iterating through an array with *ngFor="let childComponent of componentArray"). The children components all emit a select event; the twist is that each of these components has a different event handler within the parent component. Trying to be clever, I decided to store the event handler as a property of each member of componentArray. So my template is now something like:

<my-cmp *ngFor="let childComponent of componentArray" (select)="childComponent.callback()"></my-cmp>

My model contains:

componentArray = [{data:0, callback:this.onSelect0}, {data:1, callback:this.onSelect1}];

onSelect0(){/*do stuff specific to childComponent 0*/}
onSelect1(){/*do stuff specific to childComponent 1*/}

callback is a reference to the class method I would like that particular childComponent's select event to trigger. callback is triggered properly; the problem is that from it I cannot access the rest of my component because this in that context refers to the component during that iteration of the loop.

It sounds more confusing than it is. I've found a workaround but it seems really clunky (I store the class instance as a property in each member of componentArray). I've made a plunkr accessible from http://plnkr.co/edit/VxxCR8hjUsxQ3SABWe8E?p=preview. Basically my question is: if I pass the event handler as an object property (childComponent.callback above), how can I access my class instance? Any feedback is welcome.

Günter Zöchbauer · Accepted Answer · 2016-05-20 16:57:52Z

7

That's default JS/TS behavior if you pass a method reference directly. You can either use bind like methodName.bind(this) or a fat arrow function like () => methodName() to retain the scope of this.

In your Plunker just change this line

  private thing = {name:'ThingOne', onSelect: this.handlerOne };

to

  private thing = {name:'ThingOne', onSelect:() => this.handlerOne() };

Plunker example

answered May 20, 2016 at 16:57

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

BeetleJuice Over a year ago

Awesome; setting the onSelect property of thing to both onSelect:this.handlerOne.bind(this) and onSelect:()=>this.handlerOne() worked. Do you prefer one way over the other?

Günter Zöchbauer Over a year ago

Definitely ()=> everywhere

withoutOne Over a year ago

+1 , this.snapObject.dblclick(() => this.drag(this.snap,this.snapObject)); that's work! thank you..

Collectives™ on Stack Overflow

Angular 2 & Typescript: Cannot access class instance from event handler

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related