Angular: conditional class with * ngClass

Question

What is wrong with my corner code? I get:

Cannot read property 'remove' of undefined at BrowserDomAdapter.removeClass ... 

HTML

 <ol class="breadcrumb"> <li *ngClass="{active: step==='step1'}" (click)="step='step1; '">Step1</li> <li *ngClass="{active: step==='step2'}" (click)="step='step2'">Step2</li> <li *ngClass="{active: step==='step3'}" (click)="step='step3'">Step3</li> </ol> 

Answer 1

Angular 2, .., 7 provides several ways to conditionally add classes:

enter one

 [class.my-class]="step=='step1'" 

type two

 [ngClass]="{'my-class': step=='step1'}" 

and several options:

 [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'" 

Answer 2

[ngClass]=... instead of *ngClass .

* intended only for abbreviated syntax for structural directives, where you can, for example, use

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

instead of a longer equivalent version

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

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

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

Answer 3

Another solution would be to use [class.active] .

Example:

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

Answer 4

Normal structure for ngClass :

 [ngClass]="{'classname' : condition}" 

So in your case, just use it like this ...

 <ol class="breadcrumb"> <li [ngClass]="{'active': step==='step1'}" (click)="step='step1'">Step1</li> <li [ngClass]="{'active': step==='step2'}" (click)="step='step2'">Step2</li> <li [ngClass]="{'active': step==='step3'}" (click)="step='step3'">Step3</li> </ol> 

Answer 5

with the following examples you can use "IF MORE"

 <p class="{{condition ? 'checkedClass' : 'uncheckedClass'}}"> <p [ngClass]="condition ? 'checkedClass' : 'uncheckedClass'"> <p [ngClass]="[condition ? 'checkedClass' : 'uncheckedClass']"> 

Answer 6

You can use ngClass to apply the class name both conditionally and not in Angular

Example

 [ngClass]="'someClass'"> 

Conditional

 [ngClass]="{'someClass': property1.isValid}"> 

Multiple condition

  [ngClass]="{'someClass': property1.isValid && property2.isValid}"> 

Method expression

 [ngClass]="getSomeClass()" 

This method will be inside your component.

  getSomeClass(){ const isValid=this.property1 && this.property2; return {someClass1:isValid , someClass2:isValid}; } 

Answer 7

You should use something ( [ngClass] instead of *ngClass ) as follows:

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

Answer 8

In Angular 7.X

CSS classes are updated as follows, depending on the type of expression calculation:

• string - added CSS classes listed in the string (separated by spaces)

• Array - added CSS classes declared as Array elements.

• Object-keys are CSS classes that are added when the expression specified in the value accepts the true value, otherwise they are deleted.

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

Answer 9

While I was creating the reactive form, I had to assign 2 class types to the button. Here is how I did it:

 <button type="submit" class="btn" [ngClass]="(formGroup.valid)?'btn-info':''" [disabled]="!formGroup.valid">Sign in</button> 

When the form is valid, the button has btn and btn-class (from bootstrap), otherwise just the btn class.

Answer 10

to extend Mostaf Mashaekhi his answer to the second option> you can also link several options using ",",

 [ngClass]="{'my-class': step=='step1', 'my-class2':step=='step2' }" 

Also * ngIf can be used in some of these situations, usually in combination with * ngFor

 class="mats p" *ngIf="mat=='painted'" 

Answer 11

Here is what worked for me:

 [ngClass]="{'active': dashboardComponent.selected_menu == 'profile'}" 

Answer 12

ngClass syntax:

 [ngClass]="{'classname' : conditionFlag}" 

You can use like this:

 <ol class="breadcrumb"> <li [ngClass]="{'active': step==='step1'}" (click)="step='step1'">Step1</li> <li [ngClass]="{'active': step==='step2'}" (click)="step='step2'">Step2</li> <li [ngClass]="{'active': step==='step3'}" (click)="step='step3'">Step3</li> </ol> 

Answer 13

Let YourCondition be your condition or logical property, then do like this

 [class.yourClass]="YourCondition"