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.
Angular 2 is a newer version of AngularJS, released in 2016. This version of the framework using TypeScript, which is an open-sourced programming language maintained by Microsoft. Angular 2 is more useful for developing mobile applications and includes higher performance speeds than AngularJS.
Angular 2 and Angular 8 are not the same. They are different versions. While Angular 2.0 was the completely redefined and rewritten version of the basic Angular JS version, which was based on JavaScript. But with the developers at Google transitioned the framework to TypeScript.
Angular versions v2 to v11 are no longer under support.
Angular 2 is a framework for building web or mobile applications in HTML and Javascript or Typescript. It's the right choice of framework to use for your web or mobile applications.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With