From d909fb0b1f35de321bb3efb375c70131086a8b30 Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Tue, 7 Jan 2020 06:33:57 +0100
Subject: [PATCH] fix(ivy): ngClass not applying classes with trailing/leading
 spaces (#34539)

Fixes classes with trailing or leading space that are passed to `ngClass` (e.g. `{'foo ': bar}`) not being applied in Ivy. The issue comes from the fact that when the styling differ builds up the style map it uses the trimmed key to look up the value in the map that uses non-trimmed keys.

Fixes #34476.

PR Close #34539
---
 .../common/src/directives/styling_differ.ts   |  4 ++--
 packages/core/test/acceptance/styling_spec.ts | 22 +++++++++++++++++++
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/packages/common/src/directives/styling_differ.ts b/packages/common/src/directives/styling_differ.ts
index 9ba3552bb1..972c15337d 100644
--- a/packages/common/src/directives/styling_differ.ts
+++ b/packages/common/src/directives/styling_differ.ts
@@ -212,11 +212,11 @@ function bulidMapFromValues(
     // case 1: map
     for (let i = 0; i < keys.length; i++) {
       let key = keys[i];
-      key = trim ? key.trim() : key;
       const value = (values as{[key: string]: any})[key];
 
       if (value !== undefined) {
-        setMapValues(map, key, value, parseOutUnits, allowSubKeys);
+        // Map uses untrimmed keys, so don't trim until passing to `setMapValues`
+        setMapValues(map, trim ? key.trim() : key, value, parseOutUnits, allowSubKeys);
       }
     }
   } else {
diff --git a/packages/core/test/acceptance/styling_spec.ts b/packages/core/test/acceptance/styling_spec.ts
index 811f8db763..4addfa16e2 100644
--- a/packages/core/test/acceptance/styling_spec.ts
+++ b/packages/core/test/acceptance/styling_spec.ts
@@ -2485,6 +2485,28 @@ describe('styling', () => {
     const div = fixture.nativeElement.querySelector('div');
     expect(getComputedStyle(div).width).toBe('10px');
   });
+
+  it('should allow classes with trailing and leading spaces in [ngClass]', () => {
+    @Component({
+      template: `
+        <div leading-space [ngClass]="{' foo': applyClasses}"></div>
+        <div trailing-space [ngClass]="{'foo ': applyClasses}"></div>
+      `
+    })
+    class Cmp {
+      applyClasses = true;
+    }
+
+    TestBed.configureTestingModule({declarations: [Cmp]});
+    const fixture = TestBed.createComponent(Cmp);
+    fixture.detectChanges();
+
+    const leading = fixture.nativeElement.querySelector('[leading-space]');
+    const trailing = fixture.nativeElement.querySelector('[trailing-space]');
+    expect(leading.className).toBe('foo', 'Expected class to be applied despite leading space.');
+    expect(trailing.className).toBe('foo', 'Expected class to be applied despite trailing space.');
+  });
+
 });
 
 function assertStyleCounters(countForSet: number, countForRemove: number) {