CODEWITHSUNDEEP
angularhtml-tableng-class
The Sheek Geek
The Sheek Geek

Reputation: 4216

ng-class on table definition not resolving

Angular 4 application:

I have a list of models that I look through to create some table rows using *ngFor. Each model has a list that contains some strings:

{
  ...,
  changes:
  [
    'Test1',
    'Test2'
  ]
}

The sample table and *ngFor is as follows:

<table>
   <tr>
     <th>...</th>
         ...
   </tr>
   <tr *ngFor="let item of list">
        <td ng-class="'cell-changed' : item.changes.indexOf('Test1') !== -1"> 
          {{item?.test1}}</td>
        <td ng-class="'cell-changed' : item.changes.indexOf('Test5') !== -1"> 
          {{item?.test2}}</td>

   </tr>
</table>

What this should do is, for every table definition there needs to be a check on the list of changes on each item to see if it exists. If it does, I want the style to apply otherwise nothing should happen. Several examples I have seen while researching simply state what I have above and yet this does not work.

I have tested directly in javascript to see if the values in the list are what I am expecting and I get correct results. I have also simply accessed the class using the class attribute

<td class='cell-changed'>...</td>

and this works meaning it sees my css class.

I have also tried it this way:

ng-class="item.changes.indexOf('Test1') !== -1 ? 'cell-changed' : ''"

While this did not throw an error it also did not work. What am I missing?

Upvotes: 1

Views: 100

Answers (2)

Alexandre Annic
Alexandre Annic

Reputation: 10768

ng-class does not exist in Angular. It's an AngularJS directive.

The cleanest way is to do something like that:

[class.cell-changed]="item.changes.indexOf('Test1') !== -1"

Upvotes: 0

Vitalii Chmovzh
Vitalii Chmovzh

Reputation: 2943

You're mixing AngularJS and Angular approach. If you're using Angular 2+ you should use [ngClass] instead like:

<td [ngClass]="{'cell-changed': item.changes.indexOf('Test5') !== -1}"> 
    {{item?.test2}}
</td>

Upvotes: 1

Related Questions