diff --git a/packages/common/src/directives/ng_style.ts b/packages/common/src/directives/ng_style.ts index fa41226bc7..b7861dddea 100644 --- a/packages/common/src/directives/ng_style.ts +++ b/packages/common/src/directives/ng_style.ts @@ -34,8 +34,9 @@ import {Directive, DoCheck, ElementRef, Input, KeyValueChanges, KeyValueDiffer, * @description * * An attribute directive that updates styles for the containing HTML element. - * Sets one or more style properties, specified as key-value pairs. - * The key is a style name, with an optional `.` suffix (such as 'top.px', 'font-style.em'). + * Sets one or more style properties, specified as colon-separated key-value pairs. + * The key is a style name, with an optional `.` suffix + * (such as 'top.px', 'font-style.em'). * The value is an expression to be evaluated. * The resulting non-null value, expressed in the given unit, * is assigned to the given style property. @@ -54,13 +55,24 @@ export class NgStyle implements DoCheck { private _differs: KeyValueDiffers, private _ngEl: ElementRef, private _renderer: Renderer2) {} @Input() - set ngStyle(values: {[key: string]: string}) { + set ngStyle( + /** + * An array of style properties, specified as colon-separated + * key-value pairs. + * * The key is a style name, with an optional `.` suffix + * (such as 'top.px', 'font-style.em'). + * * The value is an expression to be evaluated. + */ + values: {[key: string]: string}) { this._ngStyle = values; if (!this._differ && values) { this._differ = this._differs.find(values).create(); } } + /** + * Applies the new styles if needed. + */ ngDoCheck() { if (this._differ) { const changes = this._differ.diff(this._ngStyle);