Getting same index when trying to get selected row index - html

Question

I'm using Angular and want to get index of rows inside the table when user clicks.When I try to get,it returns always 0.Because I have just one tr inside tbody but even I cange with $('table td') still getting same index.What should I change?
Table in HTML
<table id="example" class="table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Student Number</th>
<th>Department</th>
<th>Photo</th>
</tr>
</thead>
<tbody *ngFor="let studentsEl of items2">
<tr>
<td>{{studentsEl.name}}</td>
<td>{{studentsEl.age}}</td>
<td>{{studentsEl.stuNumber}}</td>
<td>{{studentsEl.department}}</td>
<td>
<img
[src]="studentsEl.imagePath"
alt="{{ studentsEl.name }}"
class="img-responsive"
style="max-height: 75px;">
</td>
</tr>
</tbody>
</table>
Typescript file of the component
constructor() {
$(document).ready( function() {
$('table tr').click( function() {
alert($(this).index());
});
});

Answer 1

Here you have a couple of issues:
use ngFor for table row
You shouldn't use dosument.ready in constructor, but create a method and click handler.
Here is HTML:
<table id="example" class="table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Student Number</th>
<th>Department</th>
<th>Photo</th>
</tr>
</thead>
<tbody >
<tr *ngFor="let studentsEl of items2; let idx = index">
<td>
<span (click)="getIndex(idx)">
{{studentsEl.name}} yourIndex: {{ idx }}
</span>
</td>
<td>{{studentsEl.age}}</td>
<td>{{studentsEl.stuNumber}}</td>
<td>{{studentsEl.department}}</td>
<td>
<img
[src]="studentsEl.imagePath"
alt="{{ studentsEl.name }}"
class="img-responsive"
style="max-height: 75px;">
</td>
</tr>
</tbody>
</table>
Your typescript file:
getIndex(idx){
console.log(idx);
}