fix(common): A null value should remove the style on IE (#21679)

vicb · mhevery · commit 7d49443060b1 · 2018-01-22T12:54:49.000-08:00
fixes #21064 PR Close #21679
diff --git a/packages/common/src/directives/ng_style.ts b/packages/common/src/directives/ng_style.ts
@@ -65,6 +65,10 @@ export class NgStyle implements DoCheck {
     const [name, unit] = nameAndUnit.split('.');
     value = value != null && unit ? `${value}${unit}` : value;
 
-    this._renderer.setStyle(this._ngEl.nativeElement, name, value as string);
+    if (value != null) {
+      this._renderer.setStyle(this._ngEl.nativeElement, name, value as string);
+    } else {
+      this._renderer.removeStyle(this._ngEl.nativeElement, name);
+    }
   }
 }
diff --git a/packages/common/test/directives/ng_style_spec.ts b/packages/common/test/directives/ng_style_spec.ts
@@ -61,6 +61,19 @@ import {ComponentFixture, TestBed, async} from '@angular/core/testing';
          expectNativeEl(fixture).not.toHaveCssStyle('max-width');
        }));
 
+    // https://github.com/angular/angular/issues/21064
+    it('should add and remove styles which names are not dash-cased', async(() => {
+         fixture = createTestComponent(`<div [ngStyle]="{'color': expr}"></div>`);
+
+         getComponent().expr = 'green';
+         fixture.detectChanges();
+         expectNativeEl(fixture).toHaveCssStyle({'color': 'green'});
+
+         getComponent().expr = null;
+         fixture.detectChanges();
+         expectNativeEl(fixture).not.toHaveCssStyle('color');
+       }));
+
     it('should update styles using style.unit notation when unit changes', async(() => {
          const template = `<div [ngStyle]="expr"></div>`;
 

Original file line number	Diff line number	Diff line change
`@@ -65,6 +65,10 @@ export class NgStyle implements DoCheck {`
`65`	`65`	`const [name, unit] = nameAndUnit.split('.');`
`66`	`66`	value = value != null && unit ? `${value}${unit}` : value;
`67`	`67`
`68`		`- this._renderer.setStyle(this._ngEl.nativeElement, name, value as string);`
	`68`	`+ if (value != null) {`
	`69`	`+ this._renderer.setStyle(this._ngEl.nativeElement, name, value as string);`
	`70`	`+ } else {`
	`71`	`+ this._renderer.removeStyle(this._ngEl.nativeElement, name);`
	`72`	`+ }`
`69`	`73`	`}`
`70`	`74`	`}`