From bedf537951e64c55dde9b38936e451daa4a4bde9 Mon Sep 17 00:00:00 2001
From: Ilia Mirkin <imirkin@alum.mit.edu>
Date: Sun, 7 Aug 2022 20:37:46 -0400
Subject: [PATCH] fix(common): allow null/undefined to be passed to ngStyle
 input (#47069)

This brings the typing of ngStyle into parity with ngClass since commit
e2ab99b95ef. Should help with some strict template checking edge cases.

PR Close #47069
---
 goldens/public-api/common/index.md            |  2 +-
 packages/common/src/directives/ng_style.ts    |  4 +--
 .../common/test/directives/ng_style_spec.ts   | 26 +++++++++++++++++++
 3 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/goldens/public-api/common/index.md b/goldens/public-api/common/index.md
index 2b23b1ede4030..7f9fc25b2ba90 100644
--- a/goldens/public-api/common/index.md
+++ b/goldens/public-api/common/index.md
@@ -549,7 +549,7 @@ export class NgStyle implements DoCheck {
     // (undocumented)
     set ngStyle(values: {
         [klass: string]: any;
-    } | null);
+    } | null | undefined);
     // (undocumented)
     static ɵdir: i0.ɵɵDirectiveDeclaration<NgStyle, "[ngStyle]", never, { "ngStyle": "ngStyle"; }, {}, never, never, true>;
     // (undocumented)
diff --git a/packages/common/src/directives/ng_style.ts b/packages/common/src/directives/ng_style.ts
index c73be426495a6..27c4477011ff4 100644
--- a/packages/common/src/directives/ng_style.ts
+++ b/packages/common/src/directives/ng_style.ts
@@ -49,14 +49,14 @@ import {Directive, DoCheck, ElementRef, Input, KeyValueChanges, KeyValueDiffer,
   standalone: true,
 })
 export class NgStyle implements DoCheck {
-  private _ngStyle: {[key: string]: string}|null = null;
+  private _ngStyle: {[key: string]: string}|null|undefined = null;
   private _differ: KeyValueDiffer<string, string|number>|null = null;
 
   constructor(
       private _ngEl: ElementRef, private _differs: KeyValueDiffers, private _renderer: Renderer2) {}
 
   @Input('ngStyle')
-  set ngStyle(values: {[klass: string]: any}|null) {
+  set ngStyle(values: {[klass: string]: any}|null|undefined) {
     this._ngStyle = values;
     if (!this._differ && values) {
       this._differ = this._differs.find(values).create();
diff --git a/packages/common/test/directives/ng_style_spec.ts b/packages/common/test/directives/ng_style_spec.ts
index d0e0de300ba7f..c63490e4423fe 100644
--- a/packages/common/test/directives/ng_style_spec.ts
+++ b/packages/common/test/directives/ng_style_spec.ts
@@ -55,6 +55,32 @@ import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing';
          expectNativeEl(fixture).toHaveCssStyle({'max-width': '30%'});
        }));
 
+    it('should remove styles with a null expression', waitForAsync(() => {
+         const template = `<div [ngStyle]="expr"></div>`;
+         fixture = createTestComponent(template);
+
+         getComponent().expr = {'max-width': '40px'};
+         fixture.detectChanges();
+         expectNativeEl(fixture).toHaveCssStyle({'max-width': '40px'});
+
+         getComponent().expr = null;
+         fixture.detectChanges();
+         expectNativeEl(fixture).not.toHaveCssStyle('max-width');
+       }));
+
+    it('should remove styles with an undefined expression', waitForAsync(() => {
+         const template = `<div [ngStyle]="expr"></div>`;
+         fixture = createTestComponent(template);
+
+         getComponent().expr = {'max-width': '40px'};
+         fixture.detectChanges();
+         expectNativeEl(fixture).toHaveCssStyle({'max-width': '40px'});
+
+         getComponent().expr = undefined;
+         fixture.detectChanges();
+         expectNativeEl(fixture).not.toHaveCssStyle('max-width');
+       }));
+
     it('should add and remove styles specified using style.unit notation', waitForAsync(() => {
          const template = `<div [ngStyle]="{'max-width.px': expr}"></div>`;