From e8a1e54537c1cb05dd21067a6aa0b5fb2c4e2388 Mon Sep 17 00:00:00 2001
From: Adam Plumer <caerus.karu@gmail.com>
Date: Sat, 9 May 2020 16:55:09 -0500
Subject: [PATCH] fix(media-marshaller): do not propagate undefined value

In certain cases, users may need to dynamically set the value of
an input to `undefined`. This value should then be ignored in
place of another value in the fallback mechanism.

Fixes #1207
---
 src/lib/core/media-marshaller/media-marshaller.ts | 2 +-
 src/lib/extended/class/class.spec.ts              | 6 ++++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/lib/core/media-marshaller/media-marshaller.ts b/src/lib/core/media-marshaller/media-marshaller.ts
index b2aaa11de..d07df16bd 100644
--- a/src/lib/core/media-marshaller/media-marshaller.ts
+++ b/src/lib/core/media-marshaller/media-marshaller.ts
@@ -317,7 +317,7 @@ export class MediaMarshaller {
       const activatedBp = this.activatedBreakpoints[i];
       const valueMap = bpMap.get(activatedBp.alias);
       if (valueMap) {
-        if (key === undefined || valueMap.has(key)) {
+        if (key === undefined || (valueMap.has(key) && valueMap.get(key) !== undefined)) {
           return valueMap;
         }
       }
diff --git a/src/lib/extended/class/class.spec.ts b/src/lib/extended/class/class.spec.ts
index c6c279784..192e30224 100644
--- a/src/lib/extended/class/class.spec.ts
+++ b/src/lib/extended/class/class.spec.ts
@@ -198,6 +198,12 @@ describe('class directive', () => {
     expectNativeEl(fixture).toHaveCssClass('mat-class');
   });
 
+  it('should support more than one responsive breakpoint on one element with undefined', () => {
+    createTestComponent(`<div ngClass.lt-lg="mat-class" [ngClass.md]="undefined"></div>`);
+    mediaController.activate('md', true);
+    expectNativeEl(fixture).toHaveCssClass('mat-class');
+  });
+
   it('should work with ngClass object notation', () => {
     createTestComponent(`
       <div [ngClass]="{'x1': hasX1, 'x3': hasX3}"