How do I fire a click-event in the child-component?

Question

I want to run a function for each of the elements clicked. This is the current situation:

<!-- This is the parent-component -->
<template ngFor let-myData [ngForOf]="someData"> 
    <tr [item]="myData" (click)="toggleActive($event)" child-component>
</template>

The child-component looks like this:

<td>{{ item.data1 }}</td>
<td>{{ item.data2 }}</td>
<td>{{ item.data3 }}</td>

Every time I click the tr, I want the toggleActive-function to fire in the child-component I clicked. At the moment it fires in the parent component. How am I able to make this work the way I want?

Answer 1

This should work using a template variable on the child component and refer to it using this variable:

<template ngFor let-myData [ngForOf]="getMyData()"> 
    <tr [item]="myData" #child (click)="child.toggleActive($event)" child-component>
</template>