ng-class in Angular2

According to the NgClass API docs, Angular 2 will accept a string, an Array, or an Object/map as the expression to NgClass. Or, of course, you could specify a function that returns one of those.

import {Component, CORE_DIRECTIVES} from 'angular2/angular2'

@Component({
  selector: 'my-app',
  directives: [CORE_DIRECTIVES],
  template: `
    <div>
      <h2>{{title}}</h2>
      <div ngClass="gray-border purple">string of classes</div>
      <div [ngClass]="'gray-border purple'">string of classes</div>
      <div [ngClass]="['gray-border', 'green']">array of classes</div>
      <div [ngClass]="{'gray-border': true, 'blue': true}">object/map of classes</div>
      <button [ngClass]="{active: isActive}" (click)="isActive = !isActive">Click me</button>
    </div>
  `,
  styles: [`
    .gray-border {  border: 1px solid gray; }
    .blue   { color: blue; }
    .green  { color: green; }
    .purple { color: purple; }
    .active { background-color: #f55; }
  `]
})
export class App {
  title = "Angular 2 - NgClass";
  isActive = false;
}

Plunker

If you are passing a literal string, note the two alternative syntaxes:

<div ngClass="gray-border purple">string of classes</div>
<div [ngClass]="'gray-border purple'">string of classes</div>

I believe the first is just syntactic sugar for the second.

And to quote the docs:

While the NgClass directive can interpret expressions evaluating to
string, Array or Object, the Object-based version is the most often
used and has an advantage of keeping all the CSS class names in a
template.