how to get dynamic table row data onclick of a button within table in typescript

Question

i'm using dynamic table with each row having a button, on click of a button, i need data of the respective row button clicked.

I've tried (click) event binding on and i get output as undefined.

<table>
<thead> <tr> <th> Name </th> <th> Company </th> </tr> </thead>
<tr *ngFor = "let employee of employees" (click) = "removeEmployee(row)">
            <td> <input type="text" [(ngModel)]= "employee.name"></td>
            <td> <input type="text" [(ngModel)] = "employee.companyName"> </td>
</tr>
</table>

.ts file

removeEmployee(tr) {
      console.log(tr);
    }

expected: on click of button, table row data should output.

actual: undefined is displayed.

You should pass employee to function removeEmployee instead of row — Michał Tkaczyk
– Michał Tkaczyk, Commented Oct 24, 2019 at 11:24

Marcel Hoekstra · Accepted Answer · 2019-10-24 11:21:45Z

5

change row in employee:

<tr *ngFor = "let employee of employees" (click) = "removeEmployee(employee)">

answered Oct 24, 2019 at 11:21

Marcel Hoekstra

1,48814 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jayanth R Over a year ago

Thanks, it's working. How to get rowIndex of respective row as well?

Marcel Hoekstra Over a year ago

Hitech Hitesh · Accepted Answer · 2019-10-24 13:14:47Z

1

Here is your solution for it

<table>
<thead> <tr> <th> Name </th> <th> Company </th> </tr> </thead>
<tr *ngFor = "let employee of employees" (click) = "removeEmployee(employee)">
            <td> <input type="text" [(ngModel)]= "employee.name"></td>
            <td> <input type="text" [(ngModel)] = "employee.companyName"> </td>
</tr>
</table>

.ts file

removeEmployee(tr) {
      console.log(tr);
    }

edited Oct 24, 2019 at 13:14

Hitech Hitesh

1,6351 gold badge11 silver badges18 bronze badges

answered Oct 24, 2019 at 11:23

Ankur Patel

4883 silver badges6 bronze badges

Collectives™ on Stack Overflow

how to get dynamic table row data onclick of a button within table in typescript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related