Skip to content
Fix Code Error

Angular: conditional class with *ngClass

March 13, 2021 by Code Error
Posted By: Anonymous

What is wrong with my Angular code? I am getting the following error:

Cannot read property ‘remove’ of undefined at BrowserDomAdapter.removeClass

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

Solution

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':'my-class2'"
Answered By: Anonymous

Related Articles

  • Form field border-radius is not working only on the…
  • How to properly do JSON API GET requests and assign…
  • The 'compilation' argument must be an instance of…
  • How to parse JSON with XE2 dbxJSON
  • Azure Availability Zone ARM Config
  • Trouble with boxes appearing/hiding based on selection
  • Search match multiple values in single field in…
  • Event Snippet for Google only shows one event while…
  • Avoid creating new session on each axios request laravel
  • Angular 12 - Generating browser application bundles…
  • loop and eliminate unwanted lines with beautiful soup
  • Why does this Azure Resource Manager Template fail…
  • NullpointerException error while working with…
  • mongodb group values by multiple fields
  • How do I limit the number of digits from 6 to 4 in…
  • Most effective way to parse JSON Objects
  • Octave using 'for' statement to show two animations…
  • error NG6002: Appears in the NgModule.imports of…
  • Azure CLI - az deployment group create -…
  • Does moment.js allow me to derive a timezone…
  • How to traverse the complex nested Json in C# and…
  • ./components/Avatar.tsx Error: Cannot find module…
  • C# Get YouTube videoId from Json
  • Python scrape JS data
  • Python JSON TypeError : list indices must be…
  • Generating a drop down list of timezones with PHP
  • Can't upload files with Apollo-client GraphQL in…
  • How to build correlation matrix plot using specified…
  • How do I remove single children in a tree?
  • Need constraints for y position or height when…
  • Siemens LOGO! PLC data in the wrong order
  • One to many relationship in two JSON arrays, lookup…
  • TypeError: players.map is not a function
  • Error Stack Overflow when trying to hide buttons in…
  • Posting array of objects to REST API with ReactJS
  • Adding Google Translate to a web site
  • Scraping text after a span in with Regex (and Requests)
  • Function runs into an error after successfully…
  • Blazor Can't Update UI
  • state data can not be set using useState in reactjs
  • How to blur the background after click on the button…
  • Python is not calling fucntions properly
  • How to query Json field so the keys are the column…
  • ng serve is checking nodemodules in previous directory
  • python pandas - add unique Ids in column from master…
  • Fragment Not Showing in the Activity
  • Vega-lite data transformation to un-nest objects
  • How can i use `parse = T` and functions like round…
  • Remove Text from the edit text when edit text is focused
  • R - Apply function to list of lm summaries
  • Python - Read JSON - TypeError: string indices must…
  • Split JSON python string to pass to function
  • How to reverse $unwind or re-assemble after $lookup?
  • How to determine the current iPhone/device model?
  • How to prevent scrolling the whole page?
  • Js Calculation based on radio button, and some problems
  • Combining pyOSC with pyQT5 / Threading?
  • MaterialCardView is in front of NavigationView. How…
  • Need to split output into an javascript array
  • C# parse FHIR bundle - read resources
  • Conditional render label Color base on another field value
  • php display array results by first letter from select option
  • Javascript filtering a nested array to exclude…
  • JSON Schema - How to apply conditionals based on…
  • How do we split words from a html file using string…
  • How can I center all my contents in html?
  • Errorbars and bar plots having different positions in ggplot
  • Why is my Shopify App built with Next.js (React) so…
  • Fix top buttons on scroll of list below
  • Jquery $(this) Child Selector
  • Issues trying to install sylius/product-bundle to my…
  • What to change in circular barplot in R?
  • Python Inserting headers for CSV file when…
  • AWS CodeCommit With Multi-factor Authentication.…
  • How do I get currency exchange rates via an API such…
  • how to transform a JSON coming from an API into…
  • Install slick carousel in VueJS project
  • Svelte application not working on android version…
  • React function keeps refreshing page causing huge…
  • Merge list of results into a single variable with Python
  • ggplot by group with filter()
  • Updating products with fetch and input value fields
  • Azure Sql : Unable to Replace HTML String
  • Why so much unused space, engine is skipping to a…
  • How to use Servlets and Ajax?
  • How to Insert cell reference in VBA code for…
  • Adding a unique id to appended forms in Jquery or Javascript
  • How to read through or navigate through a json object?
  • Generate sequence of dates for given frequency as…
  • My node.js json parse function throws error
  • I want to create a SQLite database like in the…
  • JSONLD context for duplicate keys at nested level
  • Getting a "TypeError" when trying to validate a form
  • How to add bootstrap in angular 6 project?
  • Unable to move from one fragment to another
  • How to get device make and model on iOS?
  • How to sort elasticsearch buckets by timestamp…
  • React eslint error missing in props validation
  • I'm working on pagination for my project. How do I…
  • Merge rows in Pandas dataframe based on common…

Disclaimer: This content is shared under creative common license cc-by-sa 3.0. It is generated from StackExchange Website Network.

Post navigation

Previous Post:

How to check if a string “StartsWith” another string?

Next Post:

How do I remove a submodule?

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

.net ajax android angular arrays aurelia backbone.js bash c++ css dataframe ember-data ember.js excel git html ios java javascript jquery json laravel linux list mysql next.js node.js pandas php polymer polymer-1.0 python python-3.x r reactjs regex sql sql-server string svelte typescript vue-component vue.js vuejs2 vuetify.js

  • you shouldn’t need to use z-index
  • No column in target database, but getting “The schema update is terminating because data loss might occur”
  • Angular – expected call-signature: ‘changePassword’ to have a typedeftslint(typedef)
  • trying to implement NativeAdFactory imports deprecated method by default in flutter java project
  • What should I use to get an attribute out of my foreign table in Laravel?
© 2022 Fix Code Error