How to Avoid 'Cannot read property 'remove' of undefined' when Using Angular's *ngClass?

Using Conditional Classes with *ngClass in Angular

This article addresses an issue encountered when utilizing the Angular ngClass directive to assign conditional classes. The error, "Cannot read property 'remove' of undefined," is triggered by an incorrect implementation of ngClass.

To rectify the issue, it's important to understand that Angular version 2 offers multiple approaches to conditionally apply classes:

Option 1:

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

Option 2:

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

Option 3: Multiple Classes

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

Option 4: Using Numbers as Keys

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

Option 5: Conditional Operator

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

It's worth noting that the example you provided, using the setter syntax, is not a recommended approach. Instead, opt for one of the methods discussed above. By implementing these changes, you can effectively utilize *ngClass to apply conditional classes and avoid the "Cannot read property 'remove' of undefined" error.

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