NgStyle

export directive NgStyle

exported from angular2/common defined in angular2/src/common/directives/ng_style.ts (line 9)

The NgStyle directive changes styles based on a result of expression evaluation.

An expression assigned to the ngStyle property must evaluate to an object and the corresponding element styles are updated based on changes to this object. Style names to update are taken from the object's keys, and values - from the corresponding object's values.

Syntax

Example (live demo):

import {Component} from 'angular2/core'; import {NgStyle} from 'angular2/common'; @Component({ selector: 'ngStyle-example', template: ` <h1 [ngStyle]="{'font-style': style, 'font-size': size, 'font-weight': weight}"> Change style of this text! </h1> <hr> <label>Italic: <input type="checkbox" (change)="changeStyle($event)"></label> <label>Bold: <input type="checkbox" (change)="changeWeight($event)"></label> <label>Size: <input type="text" [value]="size" (change)="size = $event.target.value"></label> `, directives: [NgStyle] }) export class NgStyleExample { style = 'normal'; weight = 'normal'; size = '20px'; changeStyle($event: any) { this.style = $event.target.checked ? 'italic' : 'normal'; } changeWeight($event: any) { this.weight = $event.target.checked ? 'bold' : 'normal'; } }

In this example the font-style, font-size and font-weight styles will be updated based on the style property's value changes.

Selectors

[ngStyle]

Inputs

ng-style bound to NgStyle.rawStyle

Constructor

constructor(_differs: KeyValueDiffers, _ngEl: ElementRef, _renderer: Renderer)

Not Yet Documented

Members

rawStyle

Not Yet Documented

ngDoCheck()

Not Yet Documented