fix(common): properly take className changes into account (#21937)

Fixes #21932

PR Close #21937

Author: pkozlowski-opensource

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]);
         });
       }
     }

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>`);