NgClass

export directive NgClass

exported from angular2/common defined in angular2/src/common/directives/ng_class.ts (line 13)

The NgClass directive conditionally adds and removes CSS classes on an HTML element based on an expression's evaluation result.

The result of an expression evaluation is interpreted differently depending on type of the expression evaluation result:

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.

Example (live demo):

import {Component} from 'angular2/core'; import {NgClass} from 'angular2/common'; @Component({ selector: 'toggle-button', inputs: ['isDisabled'], template: ` <div class="button" [ngClass]="{active: isOn, disabled: isDisabled}" (click)="toggle(!isOn)"> Click me! </div>`, styles: [` .button { width: 120px; border: medium solid black; } .active { background-color: red; } .disabled { color: gray; border: medium solid gray; } `] directives: [NgClass] }) class ToggleButton { isOn = false; isDisabled = false; toggle(newState) { if (!this.isDisabled) { this.isOn = newState; } } }

Selectors

[ngClass]

Inputs

ng-class bound to NgClass.rawClass

class bound to NgClass.initialClasses

Constructor

constructor(_iterableDiffers: IterableDiffers, _keyValueDiffers: KeyValueDiffers, _ngEl: ElementRef, _renderer: Renderer)

Not Yet Documented

Members

initialClasses

Not Yet Documented

rawClass

Not Yet Documented

ngDoCheck() : void

Not Yet Documented

ngOnDestroy() : void

Not Yet Documented