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

You should use square brackets to create property binding. See this plunk

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

Answer 2

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>

Answer 3

You can also build a string containing several classes.

In this case additionalClass is an @Input var containing the classname and active is a boolean that sets the active class

<div [ngClass]="(additionalClass + ' ' + (active ? 'active' : ''))"></div>