ng-class is a directive that allows one to setting class/classes on an HTML element based on an expression evaluation. This ng-class directive can also be represented as ngClass (camel case).

These expressions can either be an object({}) or a string or an array ([])

There are various types of class assignments based on the conditions we give to evaluate, lets see few of the ways to do so-

1. Simple class assignment:   ng-class=”classname”
2. Simple array assignment:   ng-class=”[class1, class2, class3]’
3. Simple object assignment: ng-class=”{classname: value}”

So, now lets see how to assign conditional classes:

1. Single condition assignment: Here, we assign a class if a name equals to a value then it meets a condition.
     Syntax: ng-class=”{classname: name==’value’}”
   For example, if a child chooses chocolate color then he must go to  brown class and it is represented as below-
   Example Syntax:  ng-class=”{ brown: child == ‘chocolate’}”
2. Multiple condition assignment:

          a) Here, we check for a condition for name, if it equals to value1 then class1 is assigned else if it is equal to value2 then it gets assigned to                           class2.
Syntax: ng-class=”{class1: name==’value1′,  class2: name==’value2′, }”
For example, if a child chooses chocolate color then he must go to  brown class and if he chooses strawberry then he must go to pink class,                    it is represented as below-
Example Syntax:  ng-class=”{ brown: child == ‘chocolate’, pink: child == ‘strawberry’}”

          b) Here,we check for a condition for [name], if it equals to value1 then class1 is assigned else if it is equal to value2 then it gets assigned to                       class2.
Syntax:  ng-class=”{value1: ‘class1’, value2: ‘class2’, }[name]”
For example, if a child chooses chocolate color then he must go to  brown class and if he chooses strawberry then he must go to pink class,                    it is represented as below-
Example Syntax:  ng-class=”{chocolate: ‘brown’, strawberry: ‘pink’, }[child]”

          c) Here, we check for a condition for [name] if it equals to value1 then class1 is assigned else then it gets assigned to class2.
Syntax:  ng-class=”{true: ‘class1’, false: ‘class2’, }[name == value1]”
For example, if a child chooses chocolate color then he must go to  brown class else he must go to pink class, it is represented as below-
Example Syntax:  ng-class=”{true: ‘brown’, false: ‘pink’, }[child== ‘chocolate’]”

          d) Here, we check for a condition for [name] if it equals to value1 then class1 is assigned else then it gets assigned to class2. (? is equivalent to ‘if’ and : is equivalent to ‘else’)
Syntax:  ng-class=”name == ‘value’ ? ‘class1’: ‘class2’”
For example, if a child chooses chocolate color then he must go to  brown class else he must go to pink class, it is represented as below-
Example Syntax: ng-class=”child== ‘chocolate’ ? ‘brown’: ‘pink’”