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

Closes #10326

Author: pkozlowski-opensource

modules/@angular/common/src/directives/ng_style.ts

@@ -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);
   }
 }

modules/@angular/common/test/directives/ng_style_spec.ts

@@ -65,6 +65,58 @@ export function main() {
                  });
            }));
 
+    it('should add and remove styles specified using style.unit notation',
+       inject(
+           [TestComponentBuilder, AsyncTestCompleter],
+           (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
+             var template = `<div [ngStyle]="{'max-width.px': expr}"></div>`;
+
+             tcb.overrideTemplate(TestComponent, template)
+                 .createAsync(TestComponent)
+                 .then((fixture) => {
+
+                   fixture.debugElement.componentInstance.expr = '40';
+                   fixture.detectChanges();
+                   expect(getDOM().getStyle(
+                              fixture.debugElement.children[0].nativeElement, 'max-width'))
+                       .toEqual('40px');
+
+                   fixture.debugElement.componentInstance.expr = null;
+                   fixture.detectChanges();
+                   expect(getDOM().getStyle(
+                              fixture.debugElement.children[0].nativeElement, 'max-width'))
+                       .toEqual('');
+
+                   async.done();
+                 });
+           }));
+
+    it('should update styles using style.unit notation when unit changes',
+       inject(
+           [TestComponentBuilder, AsyncTestCompleter],
+           (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
+             var template = `<div [ngStyle]="expr"></div>`;
+
+             tcb.overrideTemplate(TestComponent, template)
+                 .createAsync(TestComponent)
+                 .then((fixture) => {
+
+                   fixture.debugElement.componentInstance.expr = {'max-width.px': '40'};
+                   fixture.detectChanges();
+                   expect(getDOM().getStyle(
+                              fixture.debugElement.children[0].nativeElement, 'max-width'))
+                       .toEqual('40px');
+
+                   fixture.debugElement.componentInstance.expr = {'max-width.em': '40'};
+                   fixture.detectChanges();
+                   expect(getDOM().getStyle(
+                              fixture.debugElement.children[0].nativeElement, 'max-width'))
+                       .toEqual('40em');
+
+                   async.done();
+                 });
+           }));
+
     // keyValueDiffer is sensitive to key order #9115
     it('should change styles specified in an object expression',
        inject(