Mourad Idrissi Mourad Idrissi - 1 year ago 132
CSS Question

How to highlight a selected row in *ngFor?

I couldn't find something that will help me to solve this issue in Angular2. I'd like to set a css class when I select a row. (without using jQuery)

<table class="table table-bordered table-condensed table-hover">
<tr *ngFor="let item of companies" (click)="selectedCompany(item, $event)">

I'm using Angular2 final release

Answer Source

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 =;


And then on your template:

<tr *ngFor="let item of companies" (click)="selectCompany(item, $event)" 
 [class.highlighted]=" === 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".

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download