From 1144ce97f91d6a96f4547fde443e9b06f2f351d0 Mon Sep 17 00:00:00 2001
From: Michael Nahkies <michael@nahkies.co.nz>
Date: Mon, 16 Dec 2019 10:17:47 +0000
Subject: [PATCH] fix(common): ngStyle should ignore undefined values (#34422)

Prior to ivy, undefined values passed in an object to the
ngStyle directive were ignored. Restore this behavior by
ignoring keys that point to undefined values.

closes #34310

PR Close #34422
---
 .../common/src/directives/styling_differ.ts   |  5 +++-
 .../common/test/directives/ng_style_spec.ts   | 23 +++++++++++++++++++
 2 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/packages/common/src/directives/styling_differ.ts b/packages/common/src/directives/styling_differ.ts
index 5cc63988a0..9ba3552bb1 100644
--- a/packages/common/src/directives/styling_differ.ts
+++ b/packages/common/src/directives/styling_differ.ts
@@ -214,7 +214,10 @@ function bulidMapFromValues(
       let key = keys[i];
       key = trim ? key.trim() : key;
       const value = (values as{[key: string]: any})[key];
-      setMapValues(map, key, value, parseOutUnits, allowSubKeys);
+
+      if (value !== undefined) {
+        setMapValues(map, key, value, parseOutUnits, allowSubKeys);
+      }
     }
   } else {
     // case 2: array
diff --git a/packages/common/test/directives/ng_style_spec.ts b/packages/common/test/directives/ng_style_spec.ts
index 0c494c7f42..3978fd7dac 100644
--- a/packages/common/test/directives/ng_style_spec.ts
+++ b/packages/common/test/directives/ng_style_spec.ts
@@ -157,6 +157,29 @@ import {ComponentFixture, TestBed, async} from '@angular/core/testing';
          expectNativeEl(fixture).not.toHaveCssStyle('max-width');
          expectNativeEl(fixture).toHaveCssStyle({'font-size': '12px'});
        }));
+
+    it('should skip keys that are set to undefined values', async(() => {
+         const template = `<div [ngStyle]="expr"></div>`;
+
+         fixture = createTestComponent(template);
+
+         getComponent().expr = {
+           'border-top-color': undefined,
+           'border-top-style': undefined,
+           'border-color': 'red',
+           'border-style': 'solid',
+           'border-width': '1rem',
+         };
+
+         fixture.detectChanges();
+
+         expectNativeEl(fixture).toHaveCssStyle({
+           'border-color': 'red',
+           'border-style': 'solid',
+           'border-width': '1rem',
+         });
+       }));
+
   });
 }