This should work for you. In .html: <div class=”my_class” (click)=”clickEvent()” [ngClass]=”status ? ‘success’ : ‘danger'”> Some content </div> In .ts: status: boolean = false; clickEvent(){ this.status = !this.status; }
This is special Angular binding syntax <div [class.extra-sparkle]=”isDelightful”> This is part of the Angular compiler and you can’t build a custom binding variant following this binding style. The only supported are [class.xxx]=”…”, [style.xxx]=”…”, and [attr.xxx]=”…” ngClass is a normal Angular directive like you can build it yourself <div [ngClass]=”{‘extra-sparkle’: isDelightful}”> ngClass is more powerful. It … Read more
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’ : … Read more