Home Ask Login Register

Developers Planet

Your answer is one click away!

zoidbergi February 2016

Angular 2 conditional class with *ngClass

What is wrong with my Angular2 code? I am getting:Cannot read property 'remove' of undefined at BrowserDomAdapter.removeClass ...

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


Günter Zöchbauer February 2016

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

* is only for the shorthand syntax for structural directives where you can for example use

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

instead of the longer equivalent version

<template ngFor #item" [ngForOf]="items">

Thierry Templier February 2016

You should use something ([ngClass] instead of *ngClass) like that:

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

Joel Almeida February 2016

Another solution would be using [class.active].

Example :

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

Post Status

Asked in February 2016
Viewed 3,481 times
Voted 9
Answered 3 times


Leave an answer

Quote of the day: live life