diff --git a/packages/core/src/render3/styling/bindings.ts b/packages/core/src/render3/styling/bindings.ts index aba76032ec..ceeea0b3e8 100644 --- a/packages/core/src/render3/styling/bindings.ts +++ b/packages/core/src/render3/styling/bindings.ts @@ -726,7 +726,8 @@ export function setStylingMapsSyncFn(fn: SyncStylingMapsFn) { export const setStyle: ApplyStylingFn = (renderer: Renderer3 | null, native: RElement, prop: string, value: string | null) => { if (renderer !== null) { - if (value) { + // Use `isStylingValueDefined` to account for falsy values that should be bound like 0. + if (isStylingValueDefined(value)) { // opacity, z-index and flexbox all have number values // and these need to be converted into strings so that // they can be assigned properly. diff --git a/packages/core/src/render3/util/styling_utils.ts b/packages/core/src/render3/util/styling_utils.ts index bcb98e814f..7c69873c77 100644 --- a/packages/core/src/render3/util/styling_utils.ts +++ b/packages/core/src/render3/util/styling_utils.ts @@ -180,7 +180,8 @@ export function hasValueChanged( /** * Determines whether the provided styling value is truthy or falsy. */ -export function isStylingValueDefined(value: any) { +export function isStylingValueDefined(value: T): + value is NonNullable { // the reason why null is compared against is because // a CSS class value that is set to `false` must be // respected (otherwise it would be treated as falsy). diff --git a/packages/core/test/acceptance/styling_spec.ts b/packages/core/test/acceptance/styling_spec.ts index ceb3f07043..543b4758b0 100644 --- a/packages/core/test/acceptance/styling_spec.ts +++ b/packages/core/test/acceptance/styling_spec.ts @@ -165,6 +165,20 @@ describe('styling', () => { expect(fixture.nativeElement.innerHTML).toBe('
'); }); + it('should be able to bind zero', () => { + @Component({template: '
'}) + class App { + @ViewChild('div') div !: ElementRef; + opacity = 0; + } + + TestBed.configureTestingModule({declarations: [App]}); + const fixture = TestBed.createComponent(App); + fixture.detectChanges(); + + expect(fixture.componentInstance.div.nativeElement.style.opacity).toBe('0'); + }); + it('should be able to bind a SafeValue to backgroundImage', () => { @Component({template: '
'}) class Cmp {