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

Answers


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">
  <div>{{item}}</div>
</template>


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

Post Status

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

Search




Leave an answer