angular - call function for every row of *ngFor angular2

Question

I have to display a table and call a function for every row of table and the function called once for a row.

<tr *ngFor="let item of mf.data"  >
          <td >
            <button (click)="remove(item)" class="btn btn-danger">x</button>
          </td>
          <td>{{item.name}}</td>
          <td>{{item.email}}</td>
          <td class="text-right">{{item.age}}</td>
          <td>{{item.city | uppercase}}</td>
        </tr>

Please suggest how will I implement this functionality??

Answer 1

You can add a directive

@Directive({ selector: '[invoke]'})
class InvokeDirective {
  @Output() invoke:EventEmitter = new EventEmitter();
  ngAfterContentInit() {
    this.invoke.emit(null);
  }
}

And the use it like

<tr *ngFor="let item of mf.data" (invoke)="myFunction(item)" >