ngClass does not bind in presence of *ngFor in Angular2 Typescript

[Rully]

I am using a bootstrap table and trying to change the background color of the row that I click. Trying to do this with ngClass based on active on inactive states is not helping.

Here's the code where I try to bind inside template :

<tr *ngFor="#data of mySoCalledData" (click)="myClickedRowData()" [ngClass]="{'active': isActive}">

  <td></td>

  .

  .

</tr>

Here I pass the value of isActive inside class:

myClickedRowData(){

   isActive = true;

}

And the CSS is:

.active {

   background-color: red;

}

How do I make the background color change so it looks selected?

[Günter Zöchbauer]

What do you mean by "is not helping"? Have you checked if the class is added in the DOM?

[Rully]

Yes, I have. Can you give an example of how this works. I am not sure about this approach.

[Sander Elias]

Hi Rully,

You are missing a binding between your row and your isActive property. I created a small plunk with a possible solution for you (it's the angular hello world punk with some crude mods to show your issue :))

Regards

Sander