UNPKG

angular2

Version:

Angular 2 - a web framework for modern web apps

65 lines (64 loc) 2.21 kB
import { DoCheck, KeyValueDiffers, ElementRef, Renderer } from 'angular2/core'; /** * 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 * * - `<div [ngStyle]="{'font-style': style}"></div>` * - `<div [ngStyle]="styleExp"></div>` - here the `styleExp` must evaluate to an object * * ### Example ([live demo](http://plnkr.co/edit/YamGS6GkUh9GqWNQhCyM?p=preview)): * * ``` * 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. */ export declare class NgStyle implements DoCheck { private _differs; private _ngEl; private _renderer; constructor(_differs: KeyValueDiffers, _ngEl: ElementRef, _renderer: Renderer); rawStyle: { [key: string]: string; }; ngDoCheck(): void; private _applyChanges(changes); private _setStyle(name, val); }