fix(compiler): remove style when [style.foo]='exp' evaluates to null

pkozlowski-opensource · pkozlowski-opensource · commit f1989e7e1cd4 · 2015-11-05T06:50:46.000Z
Fixes #5110 Closes #5114
diff --git a/modules/angular2/src/core/linker/view.ts b/modules/angular2/src/core/linker/view.ts
@@ -162,7 +162,8 @@ export class AppView implements ChangeDispatcher, RenderEventDispatcher {
         this.renderer.setElementClass(elementRef, b.name, currentValue);
       } else if (b.isElementStyle()) {
         var unit = isPresent(b.unit) ? b.unit : '';
-        this.renderer.setElementStyle(elementRef, b.name, `${currentValue}${unit}`);
+        this.renderer.setElementStyle(elementRef, b.name,
+                                      isPresent(currentValue) ? `${currentValue}${unit}` : null);
       } else {
         throw new BaseException('Unsupported directive record');
       }
diff --git a/modules/angular2/test/core/linker/integration_spec.ts b/modules/angular2/test/core/linker/integration_spec.ts
@@ -193,6 +193,30 @@ export function main() {
                });
          }));
 
+      it('should remove style when when style expression evaluates to null',
+         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
+           tcb.overrideView(MyComp,
+                            new ViewMetadata({template: '<div [style.height.px]="ctxProp"></div>'}))
+
+               .createAsync(MyComp)
+               .then((fixture) => {
+
+                 fixture.debugElement.componentInstance.ctxProp = '10';
+                 fixture.detectChanges();
+                 expect(DOM.getStyle(fixture.debugElement.componentViewChildren[0].nativeElement,
+                                     'height'))
+                     .toEqual('10px');
+
+                 fixture.debugElement.componentInstance.ctxProp = null;
+                 fixture.detectChanges();
+                 expect(DOM.getStyle(fixture.debugElement.componentViewChildren[0].nativeElement,
+                                     'height'))
+                     .toEqual('');
+
+                 async.done();
+               });
+         }));
+
       it('should consume binding to property names where attr name and property name do not match',
          inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
            tcb.overrideView(MyComp,
