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

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

My model contains:

ponentArray = [{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 ponent because this in that context refers to the ponent 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 ponentArray). I've made a plunkr accessible from . 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 wele.

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

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

My model contains:

ponentArray = [{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 ponent because this in that context refers to the ponent 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 ponentArray). 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 wele.

• javascript
• angularjs
• typescript
• angular

1 Answer 1

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