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:

Answer 1

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>

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 should use square brackets to create property binding. See this plunk

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