Send *ngFor value as parameter on click

Question

I'm making a little application in Angular 2, I'm displaying a table with some data, I wanna get that data when I make a click on my table

Here's the code:

HTML template:

<tr *ngFor="let users of usersdata; let i = index">
     <td (click)="data(users.username)">{{users.username}}</td>
     <td (click)="data(users.email)">{{users.email}}</td>
     <td (click)="data(users.id)">{{users.id}}</td>
     <td (click)="data(users.roleId)">{{users.roleId}}</td>
</tr>

This is my component:

data(data: string) {
    this.selectedParam.emit(data);
    console.log(data);
}

When i make click i get this error:

EXCEPTION: Error in .../userslist.component.html:22:16 caused by: self.parent._el_24 is not a function

Solution 1

use [(ngModel)] to make two way binding of your data to your component. like below

<td [(ngModel)]="users.username" (click)="data(users.username)">{{users.username}}</td>

Also try

//$event will hold value and other reference.
data($event: any) {

}

You can get more reference in angular2 side on [] and () notation

Solution 2

You need to create a public array in the component as like.

public usersdata:any;

data(data: string) {
this.usersdata = data;
console.log(this.usersdata);

} Now you can access in html template

<tr *ngFor="let users of usersdata; let i = index">
 <td (click)="data(users.username)">{{users.username}}</td>
 <td (click)="data(users.email)">{{users.email}}</td>
 <td (click)="data(users.id)">{{users.id}}</td>
 <td (click)="data(users.roleId)">{{users.roleId}}</td>

data(data: string) {
this.selectedParam.emit(data);
console.log(data);

}

Above don't keep function name and parameter name same since it will may cause issue. Change name of the parameter

data(datavalue: string) { 
  this.selectedParam.emit(datavalue); 
  console.log(datavalue); 

}