From 7b4853bae4e2d66d50893753258320fc667d89d3 Mon Sep 17 00:00:00 2001
From: horn <filip789@gmail.com>
Date: Wed, 20 Nov 2019 07:31:20 +0100
Subject: [PATCH] fix(ivy): reset style property using ngStyle fix (#33920)

PR Close #33920
---
 packages/core/src/render3/styling/bindings.ts |  2 +-
 packages/core/test/acceptance/styling_spec.ts | 26 +++++++++++++++++++
 2 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/packages/core/src/render3/styling/bindings.ts b/packages/core/src/render3/styling/bindings.ts
index 66dc7ade51..176f03f050 100644
--- a/packages/core/src/render3/styling/bindings.ts
+++ b/packages/core/src/render3/styling/bindings.ts
@@ -1102,7 +1102,7 @@ function removeStylingValues(
     const value = getMapValue(arr, i);
     if (value) {
       const prop = getMapProp(arr, i);
-      applyFn(renderer, element, prop, false);
+      applyFn(renderer, element, prop, null);
     }
   }
 }
diff --git a/packages/core/test/acceptance/styling_spec.ts b/packages/core/test/acceptance/styling_spec.ts
index ec4b66b3e4..286e8fe726 100644
--- a/packages/core/test/acceptance/styling_spec.ts
+++ b/packages/core/test/acceptance/styling_spec.ts
@@ -1936,6 +1936,32 @@ describe('styling', () => {
     expect(div.classList.contains('bar')).toBeTruthy();
   });
 
+  it('should allow to reset style property value defined using ngStyle', () => {
+    @Component({
+      template: `
+        <div [ngStyle]="s"></div>
+      `
+    })
+    class Cmp {
+      s: any = {opacity: '1'};
+
+      clearStyle(): void { this.s = null; }
+    }
+
+    TestBed.configureTestingModule({declarations: [Cmp]});
+    const fixture = TestBed.createComponent(Cmp);
+    const comp = fixture.componentInstance;
+    fixture.detectChanges();
+
+    const div = fixture.nativeElement.querySelector('div');
+    expect(div.style.opacity).toEqual('1');
+
+    comp.clearStyle();
+    fixture.detectChanges();
+
+    expect(div.style.opacity).toEqual('');
+  });
+
   it('should allow detectChanges to be run in a property change that causes additional styling to be rendered',
      () => {
        @Component({