Angular: conditional class with *ngClass -

what wrong angular code? getting:cannot read property 'remove' of undefined @ 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> 

[ngclass]=... instead of *ngclass.

* shorthand syntax structural directives can example use

<div *ngfor="let item of items">{{item}}</div> 

instead of longer equivalent version

<template ngfor let-item [ngforof]="items">   <div>{{item}}</div> </template> 

see https://angular.io/docs/ts/latest/api/common/index/ngclass-directive.html

<some-element [ngclass]="'first second'">...</some-element> <some-element [ngclass]="['first', 'second']">...</some-element> <some-element [ngclass]="{'first': true, 'second': true, 'third': false}">...</some-element> <some-element [ngclass]="stringexp|arrayexp|objexp">...</some-element> <some-element [ngclass]="{'class1 class2 class3' : true}">...</some-element> 

see https://angular.io/docs/ts/latest/guide/template-syntax.html

<!-- toggle "special" class on/off property --> <div [class.special]="isspecial">the class binding special</div>  <!-- binding `class.special` trumps class attribute --> <div class="special"      [class.special]="!isspecial">this 1 not special</div> 

<!-- reset/override class names binding  --> <div class="bad curly special"      [class]="badcurly">bad curly</div>