Angular *ngClass Error: How to Fix 'Cannot read property 'remove' of undefined'?

Angular: Conditional Class with *ngClass

Conditional class assignment using *ngClass is an effective Angular technique for dynamically altering element styling based on specific conditions. However, encountering the error "Cannot read property 'remove' of undefined at BrowserDomAdapter.removeClass" indicates an issue with the code. Let's explore possible solutions:

Solution using Alternate Class Syntax

Angular provides alternative syntax options for conditional class assignment:

• Type One:

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

  Copy after login

• Type Two:

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

  Copy after login

• Multiple Options:

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

  Copy after login

• Enum-like Syntax:

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

  Copy after login

• Ternary Operator:

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

  Copy after login

Sample Code with Type One Syntax:

<ol>
    <li [class.active] = "step==='step1'" (click)="step='step1'">Step1</li>
    <li [class.active] = "step==='step2'" (click)="step='step2'">Step2</li>
    <li [class.active] = "step==='step3'" (click)="step='step3'">Step3</li>
</ol>

This alternate syntax removes the potential "undefined" error by using Angular's built-in class bindings.

Refer to Angular's official documentation for a comprehensive list of class binding syntax options.

The above is the detailed content of Angular *ngClass Error: How to Fix 'Cannot read property 'remove' of undefined'?. For more information, please follow other related articles on the PHP Chinese website!