How to highlight a selected row in *ngFor?

I know this was answered a while ago, but to expand on the accepted answer, you could also use [ngClass]="{'class_name': item.id === currentCompany }". The table hover may need to be removed as it may hide the background color change

<tr *ngFor="let item of companies" (click)="selectCompany($event, item)" [ngClass]="{'class_name': item.id === currentCompany  }" >

Then css

.class_name{ background-color: yellow; }

There are plenty of solutions to do this, one of them is you can store the current company when clicked.

In the *ngFor you check if the current item is the currentCompany and you add the class highlighted or whatever class you wish if its the same company.

export class TableComponent {

  public currentCompany;

  public selectCompany(event: any, item: any) {

    this.currentCompany = item.name;
  }

}

And then on your template:

<tr *ngFor="let item of companies" (click)="selectCompany($event, item)" 
 [class.highlighted]="item.name === currentCompany">

--

Another solution if you wish to have multiple highlighted companies you can add a property highlighted to your item. Then on selectCompany() you just set the property to true. On your check you do [class.highlighted]="item.highlighted".