Using variable in conditional implementation of ngClass

Question

I have developed an Angular 2 application in which I am trying to apply a CSS class using ngClass. I have stored the class name in a variable className and tried below code to apply:

1. First way

   [ngClass]={'{{className}}': expression}
   

2. Second way

   [ngClass]= {className: expression}
   

But neither of them worked.

Answer 1

update

[ngClass]="expression ? cssClass : null"

or just

[ngClass]="cssClass"

Plunker example

original (works only in Dart)

[ngClass]= {className: expression}

will work fine when expression returns true

Answer 2

Instead of setting the condition in your template, you should bind it to a variable or function and return an Object of your class in your controller.

Template

<!-- From a getter -->
[ngClass]="myClass"

<!-- From a function -->
[ngClass]="myClass(someCondition)"

Controller

// As a getter
get myClass(): any {

    return {
        someClass: someTruthyCondition
    }
}

// From a function
myClass(someCondition): any {

    return {
         someClass: someCondition === true
    }
}