fix(compiler): remove style when [style.foo]='exp' evaluates to null
Fixes #5110 Closes #5114
This commit is contained in:
@ -162,7 +162,8 @@ export class AppView implements ChangeDispatcher, RenderEventDispatcher {
|
|||||||
this.renderer.setElementClass(elementRef, b.name, currentValue);
|
this.renderer.setElementClass(elementRef, b.name, currentValue);
|
||||||
} else if (b.isElementStyle()) {
|
} else if (b.isElementStyle()) {
|
||||||
var unit = isPresent(b.unit) ? b.unit : '';
|
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 {
|
} else {
|
||||||
throw new BaseException('Unsupported directive record');
|
throw new BaseException('Unsupported directive record');
|
||||||
}
|
}
|
||||||
|
@ -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',
|
it('should consume binding to property names where attr name and property name do not match',
|
||||||
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
|
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
|
||||||
tcb.overrideView(MyComp,
|
tcb.overrideView(MyComp,
|
||||||
|
Reference in New Issue
Block a user