Angular: Conditional Class With *Ngclass

Angular: conditional class with *ngClass

Angular version 2+ provides several ways to add classes conditionally:

type one

    [class.my_class] = "step === 'step1'"

type two

    [ngClass]="{'my_class': step === 'step1'}"

and multiple option:

    [ngClass]="{'my_class': step === 'step1', 'my_class2' : step === 'step2' }"

type three

    [ngClass]="{1 : 'my_class1', 2 : 'my_class2', 3 : 'my_class4'}[step]"

type four

    [ngClass]="step == 'step1' ? 'my_class1' : 'my_class2'"

You can find these examples on the documentation page

Angular ngClass with condition

ngClass receive an object key-values, keys are possibles classess, and values are conditions to apply keys

you could use static check for every possible values of classes like this.

 <td mat-cell *matCellDef="let row" class="color1"
     [ngClass]="{
     'green': row.status === 'GREEN',
     'red': row.status === 'GREEN'">{{row.status}}</td>

other option for the same idea

<td mat-cell *matCellDef="let row"
[class.red] = "row.status === 'RED'"
[class.green] = "row.status === 'GREEN'" >
{{row.status}}
</td>

other way is using map objetc to define classes in your ts and access once from html like this
typescript file

mapClass = {
  'GREEN': 'green',
  'RED': 'red' 
}

and html

 <td mat-cell *matCellDef="let row" class="{{mapClass[row.status]}}">{{row.status}}</td>

the last one is better if your possibles class values changes frecuently, using mapClass you only add new possibles value and define css class, html keep intact.

EDITING:
I think you edit your original question and I answer that original question.
Your current error in my opinion is because you are trying to use ngCLass with ngcontainer,try to use ngClass in td.
I see you show double td inside container with diferent classes, without ngIf. If I understand rigth, using that way you should use ngIf to show row status once.
Any way, check my previous answer and I hope to be helpful

Ho to use conditional class and class with variable with ngClass in Angular?

you can't really do it with ngClass alone given what you're trying to do. You'll need to do it with separate ngClass and class directives like:

<div [ngClass]="'class_01_'+someVar" [class.class_02]="isSelected"><div>

Conditional class values using ngClass - Angular

while using [ngClass] you have 3 options, one giving the object that way the keys will be the class name if the value returns true (truthy). the others are regular string and list of arrays but you cannot use a combination of them. For your case, you can use a combination of class and [ngClass] this way you can also use static class names in the HTML as well.

class="{{iconName}} static-class-name" [ngClass]="{'redClass': useRedClass}"

you must define your data similar to the below one.

export class AppComponent {
  title = "CodeSandbox";
  iconName = 'icon1';
  useRedClass = true;
}

Angular 2 ngClass conditional with data?

You do not need the interpolation brackets {{}}. In this case, [ngClass] is looking for an expression, so

[ngClass]="perkResult.perk === perk.perk ? 'highlight' : 'none-hightlight'"

or

[ngClass]="[perkResult.perk === perk.perk ? 'highlight' : 'none-hightlight']"

will work.

[ng-class]Add multiple classes with a single condition

As specified in:
https://angular.io/api/common/NgClass#description
You can:
<some-element [ngClass]="{'class1 class2 class3' : true}">...</some-element>

AngularJS ngClass conditional

Your first attempt was almost right, It should work without the quotes.

{test: obj.value1 == 'someothervalue'}

Here is a plnkr.

The ngClass directive will work with any expression that evaluates truthy or falsey, a bit similar to Javascript expressions but with some differences, you can read about here.
If your conditional is too complex, then you can use a function that returns truthy or falsey, as you did in your third attempt.

Just to complement: You can also use logical operators to form logical expressions like

ng-class="{'test': obj.value1 == 'someothervalue' || obj.value2 == 'somethingelse'}"

---

Related Topics