Multiple classes in ngClass

Question

I'm trying to add multiple values in *ngClass, what used to work on previous alpha releases and doesn't seem to work now on angular2 beta:

<i *ngClass="['fa','fa-star']"></i>

It produces an error:

EXCEPTION: TypeError: Cannot read property 'add' of undefined in [['fa','fa-star'] in PostView@30:27]

What am I missing here?

Answer 1

If you aren't going to be changing these classes dynamically then using ngClass is overkill. You can simply use class="fa fa-star" in your template.

ngClass should be used when you when you want to switch these on and off dynamically. There's an example in the docs:

Your component would have a method:

setClasses() {
  return {
    saveable: this.canSave,      // true
    modified: !this.isUnchanged, // false
    special: this.isSpecial,     // true
  }
}

then use ngClass in your template like so:

<div [ngClass]="setClasses()">This div is saveable and special</div>