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

@@ -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.

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).

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 {