The error: “Cannot read property ‘remove’ of undefined at BrowserDomAdapter.removeClass” is a common error that can show up in many ways. In this blog, we will go through some of the ways you can fix this issue. Read on.

What is “Cannot read property ‘remove’ of undefined at BrowserDomAdapter.removeClass”?

Run the command below and gave an error:

<li *ngClass="{active: data==='data1'}" (click)="data='data1'">Data1</li>

Error message:

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

Cause of the error

This is usually the case when the format of the data does not match to the HTML or the declaration of the table within DataTables.  

How to fix it?

And here are some of our workarounds. Consult and choose the appropriate option.

Approach 1: 

Usually, the data will be divided into 2 types, the form with 1 data and the form with 2 or more data. Each type will be declared as follows. Choose one of the following classes for each specific instance.

Type 1

[class.my_class] = "data=== 'data1'"

Type 2

[ngClass]="{'my_class': data=== 'data1'}"

Type 3 with more data

[ngClass]="{'my_class': data === 'data1', 'my_class2' : data === 'data2' }"

or

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

Type 4

[ngClass]="data == 'data1' ? 'my_class1' : 'my_class2'"

Approach 2: Try utilizing [class.active]

Here’s an instance: 

<ol class="breadcrumb">

    <li [class.active]="data=='data1'" (click)="data='data1'">data1</li>

</ol>

Learn more about Angular NgClass Properties 

Angular NgClass is an inbuilt directive that lets you to specify the CSS class dynamically to the DOM element. The NgClass directive allows for the addition and removal of CSS classes for the HTML element.

You can change the CSS classes according to the type of expression you choose.

1. String – The CSS classes that are listed within the strings (space-delimited) will be added to the string,

2. Array – CSS classes that are declared as array elements are added to the HTML,

3. The objects – Keys can be described as CSS classes that are added after the expression specified in the value is evaluated to determine the real value.If the value is false, then the keys are eliminated.

Conclusion

We hope you enjoyed our article about the error. With this knowledge, we know that you can fix your error: “Cannot read property ‘remove’ of undefined at BrowserDomAdapter.removeClass” quickly by following these steps! If you still have any other questions about fixing this syntax error, please leave a comment below. Thank you for reading!