feat(NgStyle): add support for the style.unit notation (#10496)

Closes #10326
This commit is contained in:
Pawel Kozlowski
2016-08-04 20:00:43 +02:00
committed by Alex Rickabaugh
parent cd18de7a21
commit 8b18ef4ba2
2 changed files with 61 additions and 4 deletions

View File

@ -21,7 +21,8 @@ import {isBlank, isPresent} from '../facade/lang';
*
* ### Syntax
*
* - `<div [ngStyle]="{'font-style': style}"></div>`
* - `<div [ngStyle]="{'font-style': styleExp}"></div>`
* - `<div [ngStyle]="{'max-width.px': widthExp}"></div>`
* - `<div [ngStyle]="styleExp"></div>` - here the `styleExp` must evaluate to an object
*
* ### Example ([live demo](http://plnkr.co/edit/YamGS6GkUh9GqWNQhCyM?p=preview)):
@ -93,15 +94,19 @@ export class NgStyle implements DoCheck {
}
private _applyChanges(changes: any): void {
changes.forEachRemovedItem(
(record: KeyValueChangeRecord) => { this._setStyle(record.key, null); });
changes.forEachAddedItem(
(record: KeyValueChangeRecord) => { this._setStyle(record.key, record.currentValue); });
changes.forEachChangedItem(
(record: KeyValueChangeRecord) => { this._setStyle(record.key, record.currentValue); });
changes.forEachRemovedItem(
(record: KeyValueChangeRecord) => { this._setStyle(record.key, null); });
}
private _setStyle(name: string, val: string): void {
this._renderer.setElementStyle(this._ngEl.nativeElement, name, val);
const nameParts = name.split('.');
const nameToSet = nameParts[0];
const valToSet = isPresent(val) && nameParts.length === 2 ? `${val}${nameParts[1]}` : val;
this._renderer.setElementStyle(this._ngEl.nativeElement, nameToSet, valToSet);
}
}