clase ng en Angular2

De acuerdo con los documentos de la API de ngClass , Angular 2 aceptará una cadena, una matriz o un Objeto/mapa como expresión para ngClass. O, por supuesto, podría especificar una función que devuelve uno de esos.

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

Si está pasando una cadena literal, tenga en cuenta las dos sintaxis alternativas:

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

Creo que el primero es solo azúcar sintáctico para el segundo.

Y para citar los documentos:

Mientras que la ngClass directiva puede interpretar expresiones que evalúan a string, Array u Objeto, la versión basada en objetos es la más frecuente usado y tiene la ventaja de mantener todos los nombres de clase CSS en un plantilla.

Un método más [Usando Operador Ternario e Interpolación]

(Aunque Mark Rajcok indica todos los métodos posibles ngClass, pero se puede acoplar con ternary operator y se obtiene else condiciones)

Plantilla

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

o utilice ternary operator con ngClass, ver cómo

TS

export class App {
  this.classCondition = false;
}

Resultado

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

Espero que ayude a alguien.

Usando typescript y Angular 2 beta, ngClass no parece funcionar. Desde seguir la vista previa de la API - https://angular.io/docs/ts/latest/api/common/NgClass-directive.html

template: '<div [ngClass]="classMap">Class Map</div>'

El ejemplo de Google proporciona dos versiones de código (que supongo que es Alfa y actualizado a Beta). La nueva sintaxis en el ejemplo del sitio web no parece funcionar... alguna idea?

@View({
    template: `
        <div class="container questions">
            <div class="row formSection">
                 <h2>
                     <div [ngClass]="completed">completed</div>
                </h2>
                <questionSection></questionSection>
            </div>
        </div>
        `,
        directives: [NgClass, QuestionSection],
})

Estaba tratando de hacer algo similar, tenía una lista de elementos de menú y quería especificar una clase fontawesome para cada elemento. Así es como lo hice funcionar. En mi componente typescript tenía esto:

    export class AppCmp {
       menuItems = [
         {
           text: 'Editor',
           icon: 'fa fa-pencil'
         },
         {
           text: 'Account',
           icon: 'fa fa-user'
         },
         {
           text: 'Catalog',
           icon: 'fa fa-list'
         }
      ]
    }

Luego en mi html:

  <div *ngFor="#item of menuItems; #index = index">
        <i [attr.class]="item.icon"></i>
        <span>{{ item.text }}</span>
  </div>

Aquí está el émbolo, https://plnkr.co/edit/PIDRZsc7ZhISNgZzOWuY?p=preview Esperanza que ayuda