-1

I'm new to Angular and I'm trying to get ngClass to work but it doesn't want to. Here is my code:

<div *ngFor= "let job of dashboardJobsDetails" class="card">
    <div  ngClass="{'red card':job.status == 'Failed', 'yellow card': 
          job.status =='Warning', 'green card': job.status =='Success'}">
        Status: {{job.status}}
    </div>
</div>

The ngFor works great, the second div shows the correct status, but the ngClass never applies the style. Any ideas or tips?

Ecco Telli
  • 1
  • 1
  • 2
  • 1
    Why did you think `ng-Class` *would* work? I'd recommend reading [the docs](https://angular.io/guide/template-syntax#ngClass) when you use things. – jonrsharpe Sep 01 '17 at 20:10
  • I tried the docs, I also tried every possible combination of ngClass (ngClass, ng-class, [ngClass], [ng-Class]) none of them worked. Just to answer your question, search ng-class in this site and you will find plenty of proof that it works. – Ecco Telli Sep 01 '17 at 20:20
  • `ng-class` was AngularJS (1.x). You could have shown an example that actually made sense in Angular (2+), rather than something that never would work. – jonrsharpe Sep 01 '17 at 20:21
  • Possible duplicate of [Angular 2 conditional class with \*ngClass](https://stackoverflow.com/questions/35269179/angular-2-conditional-class-with-ngclass) – Jota.Toledo Sep 01 '17 at 20:24
  • A dup in my opinion, and the linked answer has some good resources – Jota.Toledo Sep 01 '17 at 20:26
  • Given that you only have one of the three set, by the way, the best thing might be to write a property to provide that class name and just do e.g. `[class]="cardStatus"` – jonrsharpe Sep 01 '17 at 20:47

1 Answers1

3

The syntax is wrong, it should be

<div  [ngClass]="{'red card':job.status == 'Failed', 'yellow card': 
      job.status =='Warning', 'green card': job.status =='Success'}">
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • 2
    What does "doesn't work" mean *exactly*? Do you have more than one `NgModule` in your application? If yes, did you import `CommonModule` in the additional NgModule? – Günter Zöchbauer Sep 01 '17 at 20:21