diff --git a/modules/angular2/src/core/directives/ng_style.ts b/modules/angular2/src/core/directives/ng_style.ts index 9090ca045c..fbeebd8b3e 100644 --- a/modules/angular2/src/core/directives/ng_style.ts +++ b/modules/angular2/src/core/directives/ng_style.ts @@ -9,25 +9,56 @@ import {Renderer} from 'angular2/src/core/render'; import {isPresent, isBlank, print} from 'angular2/src/core/facade/lang'; /** - * Adds or removes styles based on an {expression}. + * The `NgStyle` directive changes styles based on a result of expression evaluation. * - * When the expression assigned to `ng-style` evaluates to an object, the corresponding element - * styles are updated. Style names to update are taken from the object keys and values - from the - * corresponding object values. - * - * # Example: - * - * ``` - *
- * ``` - * - * In the above example the `text-align` style will be updated based on the `alignExp` value - * changes. + * An expression assigned to the `ng-style` 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 * - * - `` - * - `` + * - `` + * - `` - here the `styleExp` must evaluate to an object + * + * ### Example ([live demo](http://plnkr.co/edit/YamGS6GkUh9GqWNQhCyM?p=preview)): + * + * ``` + * import {Component, View, NgStyle} from 'angular2/angular2'; + * + * @Component({ + * selector: 'ng-style-example' + * }) + * @View({ + * template: ` + *