How to make class binding on an angular table row using table row index to match elements of component array

rj

unread,

Feb 10, 2019, 5:31:27 AM2/10/19

to Angular and AngularJS discussion

I have an array field consisting of numeric digits in the angular component.

venuesRunning: any = [13, 14];

I need to activate a class on the row of the table within the HTML template based on a condition which checks if the index of the row is within the component array(`venuesRunning`). Below is the code I tried to use

<tr
      *ngFor="let v of mf.data; index as i" 
      [class.bg-primary]="i in venuesRunning">
      {{ v }}
    </tr>

I am getting syntax error stating

> [Angular] Parser Error: Unexpected token 'in' at column 3 in [i in venuesRunning] in @64:53

Then i tried this but it is

<tr  *ngFor="let v of mf.data; index as i" [class.bg-primary]="venuesRunning[i]">

But the above code is not working correctly. Its activating 0th and 1st index rows of template table rather than 13th and 14th index rows

What am I doing wrong here? Can someone correct me?

Sander Elias

unread,

Feb 10, 2019, 10:24:27 AM2/10/19

to Angular and AngularJS discussion

Hi rj,

try:

[class.bg-primary]="venuesRunning.includes(v)">

(you might want ti use i insteadn of v I’m not sure what you are trying to do.

Regards
Sander

rj

unread,

Feb 10, 2019, 12:21:38 PM2/10/19

to Angular and AngularJS discussion

Hi Sander,

Here is the steps about what i am trying to do -

My requirement in brief -

If a particular timestamp property of a JSON array object is different from the current timestamp by 15 minutes or less, i need to highlight/continuously blink the corresponding table(which loads the JSON array object) row on the Template UI.

1. I check for a datetime field within a JSON object and subtract it with current datetime by converting both(former and latter) into milliseconds in my component.

// Check for actively running venues
      this.filteredVenues.forEach((ven, index) => {
        if (tm.getTime() - (new Date(ven.lastheartbeat).getTime()) <= 900000) {
          this.venuesRunning.push(index);
        }
        console.log(this.venuesRunning);
      });

2. If the difference is lesser than 900000 milliseconds, i capture the index of the json sub object and push the same into a component array field

venuesRunning: any = []; // running state of venue

3. On the UI template i have a table which will parse my JSON object and load all its content. However, if any of the row index of the table, matches with the contents/indexes of component array, i need to highlight/blink only those particular rows.

<tr  *ngFor="let v of mf.data; index as i" [class.bg-primary]="venuesRunning.includes(v)">
          <td>{{i}} {{v.name}}</td>
          <td>{{v.address}}</td>
          <td>{{v.description}}</td>
.....

The solution you provided seems to be not working for my requirement. It was my bad that i did not put things properly before. Please let me know if that made sense or i need to explain more better.

Thanks,

Rohit

rj

unread,

Feb 10, 2019, 1:36:37 PM2/10/19

to Angular and AngularJS discussion

Actually your solution works. I made the modification as you suggested. Thank you Sander. Appreciate your help.