how to change background color of table row clicked in angular?

December 31, 2021

The Following is the sample snippet of the problem

<table>
  <tr>
    <th>a</th>
    <th>b</th>
    <th>d</th>
    <th>c</th>
  </tr>
  <tr style="cursor: pointer;" *ngFor="let row of list; let i = index">
    <td>{{ row.a }}</td>
    <td>{{ row.b }}</td>
    <td>{{ row.c }}</td>
    <td>{{ row.d }}</td>
  </tr>
</table>

I have initialized the value of list in ts file.

this.list = [
          {'a': 1, 'b': 2, 'c': 3, 'd': 4},
          {'a': 1, 'b': 2, 'c': 3, 'd': 4},
          {'a': 1, 'b': 2, 'c': 3, 'd': 4}
        ];

>Solution :

In angular, we can use ngClass to bind a css class to an HTML element. For this task, we can save the row index in a variable when the user click on a row and use it in ngClass to change the background color.

ngClass Documentation

Demo