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.

Filip Lauc · Accepted Answer · 2016-07-19 11:15:44Z

2

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>

answered Jul 19, 2016 at 11:15

Filip Lauc

3,0291 gold badge19 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Dheeraj Agrawal Over a year ago

Yeah I can do that as well but checking directly in DOM seems to be more convenient.

Filip Lauc Over a year ago

You can simply paste the code in to the [class.activeRow] block

Filip Lauc Over a year ago

like this: [class.activeRow]="currentFocusedRow.indexOf(contact.icontact_id) !== -1"

Filip Lauc Over a year ago

However i don't think there is any change in performance. It's simply a matter of how you want to format your code.

uksz · Accepted Answer · 2016-07-18 09:52:18Z

1

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.

answered Jul 18, 2016 at 9:52

uksz

18.4k31 gold badges102 silver badges172 bronze badges

1 Comment

Dheeraj Agrawal Over a year ago

how indexes will help me here? Are you suggesting to put something like this [class.activeRow]="contact.icontact_id == currentFocusedRow[i]" it won't work

Dheeraj Agrawal · Accepted Answer · 2016-07-19 12:01:59Z

0

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>

answered Jul 19, 2016 at 12:01

Dheeraj Agrawal

2,35911 gold badges47 silver badges65 bronze badges

Collectives™ on Stack Overflow

Conditional css class assign in angular 2

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related