Posts

Showing posts with the label Angular Ng Class

Angular: Conditional Class With *ngClass

Answer : 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'" [ngClass]=... instead of *ngClass . * is only for the shorthand syntax for structural directives where you can for example use <div *ngFor="let item of items">{{item}}</div> instead of the longer equivalent version <template ngFor let-item [ngForOf]="items"> <div>{{item}}</div> </template> See also https://angular.io/docs/ts/latest/api/common/index/NgCl...