From 4a426696c98b28d20175cc3244ffa8b8b703790f Mon Sep 17 00:00:00 2001
From: Pawel Kozlowski <pkozlowski.opensource@gmail.com>
Date: Wed, 31 Jan 2018 17:57:37 +0100
Subject: [PATCH] fix(common): properly take className changes into account
 (#21937)

Fixes #21932

PR Close #21937
---
 packages/common/src/directives/ng_class.ts       |  2 +-
 packages/common/test/directives/ng_class_spec.ts | 11 +++++++++++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/packages/common/src/directives/ng_class.ts b/packages/common/src/directives/ng_class.ts
index 9acc430fde..cd4bd6bfeb 100644
--- a/packages/common/src/directives/ng_class.ts
+++ b/packages/common/src/directives/ng_class.ts
@@ -126,7 +126,7 @@ export class NgClass implements DoCheck {
         (<any>rawClassVal).forEach((klass: string) => this._toggleClass(klass, !isCleanup));
       } else {
         Object.keys(rawClassVal).forEach(klass => {
-          if (rawClassVal[klass] != null) this._toggleClass(klass, !isCleanup);
+          this._toggleClass(klass, isCleanup ? false : !!rawClassVal[klass]);
         });
       }
     }
diff --git a/packages/common/test/directives/ng_class_spec.ts b/packages/common/test/directives/ng_class_spec.ts
index 4db790b5b7..e0efe7900b 100644
--- a/packages/common/test/directives/ng_class_spec.ts
+++ b/packages/common/test/directives/ng_class_spec.ts
@@ -290,6 +290,17 @@ import {ComponentFixture, TestBed, async} from '@angular/core/testing';
            detectChangesAndExpectClassName(`init foo`);
          }));
 
+      it('should co-operate with the interpolated class attribute when interpolation changes',
+         async(() => {
+           fixture = createTestComponent(
+               `<div [ngClass]="{large: false, small: true}" class="{{strExpr}}"></div>`);
+
+           detectChangesAndExpectClassName(`foo small`);
+
+           getComponent().strExpr = 'bar';
+           detectChangesAndExpectClassName(`bar small`);
+         }));
+
       it('should co-operate with the class attribute and binding to it', async(() => {
            fixture =
                createTestComponent(`<div [ngClass]="objExpr" class="init" [class]="'foo'"></div>`);