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.

You must specify CSSClass in directives property of @View decorator. Check out this plunk.

@Component({    selector: 'app',})@View({    template: '<div [class]="classMap">Class Map</div>',    directives: [CSSClass]})class App {    constructor() {        this.classMap = { 'class1': true, 'class2': false };        setInterval(() => {            this.classMap.class2 = !this.classMap.class2;        }, 1000)    }}

UPD

CSSClass was renamed to NgClass in alpha-35. See this plunk

@Component({  selector: 'app',})@View({  directives: [NgClass],  template: `    <div [ng-class]="classMap">Class Map</div>  `,})class App { /* ... */ }

One more method [ Using Ternary Operator and Interpolation]

(Altough Mark Rajcok stated all possible ngClass methods, but you can couple it with ternary operator and you get else condtions)

Template

<div class="hard-coded-class {{classCondition ? 'c1 c2': 'c3 c4'}}">    Conditional classes using <b>Ternary Operator</b></div>

or use ternary operator with ngClass, see how

TS

export class App {  this.classCondition = false;}

Result

<div class="hard-coded-class c3 c4">      Conditional classes using <b>Ternary Operator</b></div>

Hope it helps someone.