Row Index for highlighting selected row

Question

I want it so when I select a row of the table, it highlights that selected row. Currently if I select a row, it highlights all the rows. Here is what it looks like:

The problem is that when I used row.index in my html it doesn't work. It says it doesn't recognise index. How can I get this to work?

HTML Code:

<table class="table table-sm table-hover table-borderless">
  <tr *ngFor="let filter of pagedFilters">
    <td [ngClass]="{'highlight': selectedRowIndex == row}" 
      (click)="showForEdit(filter, row)">{{filter.viewType | filter: filterTypes }}</td>
    <td>
      <a><i class="oi oi-list" ></i></a>
    </td>
  </tr>
</table>

CSS Code:

.highlight {
  background: green;
}

Angular Code:

selectedRowIndex: number = -1;

showForEdit(filter: Filter, row) {
    this.selectedFilterChange.emit(filter);
    this.selectedRowIndex = row;
}

Answer 1

You can do the following, by passing the index: here's a working stackbliz

https://stackblitz.com/edit/angular-bskjjr

<table class="table table-sm table-hover table-borderless">
  <tr *ngFor="let filter of pagedFilters ; let i = index">
    <td [ngClass]="{'highlight': selectedRowIndex === i}" 
      (click)="showForEdit(i)">{{filter}}</td>
    <td>
      <a><i class="oi oi-list" ></i></a>
    </td>
  </tr>
</table>