angular2
Version:
Angular 2 - a web framework for modern web apps
104 lines • 4.33 kB
JavaScript
;var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") return Reflect.decorate(decorators, target, key, desc);
switch (arguments.length) {
case 2: return decorators.reduceRight(function(o, d) { return (d && d(o)) || o; }, target);
case 3: return decorators.reduceRight(function(o, d) { return (d && d(target, key)), void 0; }, void 0);
case 4: return decorators.reduceRight(function(o, d) { return (d && d(target, key, o)) || o; }, desc);
}
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var core_1 = require('angular2/core');
var lang_1 = require('angular2/src/facade/lang');
/**
* The `NgStyle` directive changes styles based on a result of expression evaluation.
*
* 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
*
* - `<div [ng-style]="{'font-style': style}"></div>`
* - `<div [ng-style]="styleExp"></div>` - here the `styleExp` must evaluate to an object
*
* ### Example ([live demo](http://plnkr.co/edit/YamGS6GkUh9GqWNQhCyM?p=preview)):
*
* ```
* import {Component, NgStyle} from 'angular2/angular2';
*
* @Component({
* selector: 'ng-style-example',
* template: `
* <h1 [ng-style]="{'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.
*/
var NgStyle = (function () {
function NgStyle(_differs, _ngEl, _renderer) {
this._differs = _differs;
this._ngEl = _ngEl;
this._renderer = _renderer;
}
Object.defineProperty(NgStyle.prototype, "rawStyle", {
set: function (v) {
this._rawStyle = v;
if (lang_1.isBlank(this._differ) && lang_1.isPresent(v)) {
this._differ = this._differs.find(this._rawStyle).create(null);
}
},
enumerable: true,
configurable: true
});
NgStyle.prototype.ngDoCheck = function () {
if (lang_1.isPresent(this._differ)) {
var changes = this._differ.diff(this._rawStyle);
if (lang_1.isPresent(changes)) {
this._applyChanges(changes);
}
}
};
NgStyle.prototype._applyChanges = function (changes) {
var _this = this;
changes.forEachAddedItem(function (record) { _this._setStyle(record.key, record.currentValue); });
changes.forEachChangedItem(function (record) { _this._setStyle(record.key, record.currentValue); });
changes.forEachRemovedItem(function (record) { _this._setStyle(record.key, null); });
};
NgStyle.prototype._setStyle = function (name, val) {
this._renderer.setElementStyle(this._ngEl, name, val);
};
NgStyle = __decorate([
core_1.Directive({ selector: '[ng-style]', inputs: ['rawStyle: ng-style'] }),
__metadata('design:paramtypes', [core_1.KeyValueDiffers, core_1.ElementRef, core_1.Renderer])
], NgStyle);
return NgStyle;
})();
exports.NgStyle = NgStyle;
//# sourceMappingURL=ng_style.js.map