Conditional css class assign in angular 2

Question

I have a grid with checkbox, I am putting checked values in an array (currentFocusedRow), now I want to assign activeRow class to the checked row:

// app.ts
class contact {
  public contactlist = [{icontact_id: "contact1"}, {icontact_id: "contact2"}, {icontact_id: "contact3"}, {...}];
  public currentFocusedRow = ["contact2", "contact3"];
}

// app.html
<tr *ngFor="let contact of contactlist"
   [class.activeRow]="contact.icontact_id == currentFocusedRow">
   ...
</tr>

now since currentFocusedRow is an array i can't simply check like that (contact.icontact_id == currentFocusedRow) there should be something to check if the value is present in that array or not like indexOf.

Answer 1

I think this should work for you:

Typescript

isActive(id) {
    return this.currentFocusedRow.indexOf(id) !== -1
}

HTML

<tr *ngFor="let contact of contactlist"
    [class.activeRow]="isActive(contact.icontact_id)">
</tr>

Answer 2

You can use index of the object that is current object, by using:

<tr *ngFor="let contact of contactlist; let i = index">

Which will enable you to get those indexes.

Apart from that, you can just use NgClass directive.

Answer 3

Checking with indexOf in directive itself worked, this is pretty amazing that we can use this JS methods directly in DOM:

<tr *ngFor="let contact of contactlist;"
    [class.activeRow]="currentFocusedRow.indexOf(contact.icontact_id) != '-1'">
</tr>