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

fixes #21064

PR Close #21679
This commit is contained in:
Victor Berchet 2018-01-19 17:14:05 -08:00 committed by Miško Hevery
parent 86d9612230
commit 7d49443060
2 changed files with 18 additions and 1 deletions

View File

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

View File

@ -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>`;