From 3efb060127f6cd7c54590f5c1a6c2d3eaf9e2f04 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Fri, 4 Oct 2019 12:35:32 +0200
Subject: [PATCH] fix(ivy): unable to bind style zero (#32994)

Fixes not being able to bind zero as a value in style bindings.

Fixes #32984.

PR Close #32994
---
 packages/core/src/render3/styling/bindings.ts   |  3 ++-
 packages/core/src/render3/util/styling_utils.ts |  3 ++-
 packages/core/test/acceptance/styling_spec.ts   | 14 ++++++++++++++
 3 files changed, 18 insertions(+), 2 deletions(-)

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<T extends string|number|{}|null>(value: T):
+    value is NonNullable<T> {
   // 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('<div></div>');
   });
 
+  it('should be able to bind zero', () => {
+    @Component({template: '<div #div [style.opacity]="opacity"></div>'})
+    class App {
+      @ViewChild('div') div !: ElementRef<HTMLElement>;
+      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: '<div [style.backgroundImage]="image"></div>'})
     class Cmp {