Angular versión 2+ proporciona varias formas de agregar clases condicionalmente:

tipo uno

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

tipo dos

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

y opción múltiple:

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

tipo tres

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

tipo cuatro

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

[ngClass]=... en lugar de *ngClass .

* es solo para la sintaxis abreviada de directivas estructurales donde, por ejemplo, puede usar

 <div *ngFor="let item of items">{{item}}</div>

en lugar de la versión equivalente más larga

 <template ngFor let-item [ngForOf]="items"> <div>{{item}}</div> </template>

Consulte también https://angular.io/docs/ts/latest/api/common/index/NgClass-directive.html

 <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>

Consulte también https://angular.io/docs/ts/latest/guide/template-syntax.html

 <!-- toggle the "special" class on/off with a property --> <div [class.special]="isSpecial">The class binding is special</div> <!-- binding to `class.special` trumps the class attribute --> <div class="special" [class.special]="!isSpecial">This one is not so special</div>

 <!-- reset/override all class names with a binding --> <div class="bad curly special" [class]="badCurly">Bad curly</div>

Otra solución sería usar [class.active] .

Ejemplo :

 <ol class="breadcrumb"> <li [class.active]="step=='step1'" (click)="step='step1'">Step1</li> </ol>