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

pkozlowski-opensource · alxhub · commit 4a426696c98b · 2018-04-04T09:41:16.000-07:00
Fixes #21932 PR Close #21937
diff --git 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
@@ -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>`);

Original file line number	Diff line number	Diff line change
`@@ -126,7 +126,7 @@ export class NgClass implements DoCheck {`
`126`	`126`	`(<any>rawClassVal).forEach((klass: string) => this._toggleClass(klass, !isCleanup));`
`127`	`127`	`} else {`
`128`	`128`	`Object.keys(rawClassVal).forEach(klass => {`
`129`		`- if (rawClassVal[klass] != null) this._toggleClass(klass, !isCleanup);`
	`129`	`+ this._toggleClass(klass, isCleanup ? false : !!rawClassVal[klass]);`
`130`	`130`	`});`
`131`	`131`	`}`
`132`	`132`	`}`