xxxxxxxxxx
[ngClass]="{'myclass1': match === 'match1'}"
[ngClass]="{'myclass2': match === 'match1', 'myclass2' : match === 'match2' }"
xxxxxxxxxx
//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'"
xxxxxxxxxx
content_copy
<some-element [ngClass]="'first second'"></some-element>
<some-element [ngClass]="['first', 'second']"></some-element>
<some-element [ngClass]="{'first': true, 'second': true, 'third': false}"></some-element>
<some-element [ngClass]="stringExp|arrayExp|objExp"></some-element>
<some-element [ngClass]="{'class1 class2 class3' : true}"></some-element>
xxxxxxxxxx
// class can be added using both the ways
[class.some_class] = "variable === 'value'"
[ngClass]="{'some_class': variable === 'value'}"
// multiple classes
[ngClass]="{'some_class': variable === 'value', 'some_class_2': variable2 === 'value2'}"
// multiple classes seperated by spcase
[ngClass]="{'some_class some_class_2': variable === 'value'}"
// appropriate class will be applied based on variable value
[ngClass]="{val1 : 'class_1', val2 : 'class_2', val3 : 'class_3'}[variable]"
// ternary operator
[ngClass]="{variable === 'value' ? 'some_class_1' : 'some_class_2'}"
xxxxxxxxxx
<div [ngClass]="{
'green': number > 5,
'red': number <= 5,
}" ></div>
//if the number is over 5, the class 'green' will be added to the div.
//if the number is below or equal 5, the class 'red' will be added to the div.
xxxxxxxxxx
[ngClass]="{'my_class': step === 'step1', 'my_class2' : step === 'step2' }"