fix(NgClass): ignore empty and blank class names

pkozlowski-opensource · pkozlowski-opensource · commit 73351ac00fcb · 2015-09-16T07:56:48.000Z
Fixes #4033 Closes #4173
diff --git a/modules/angular2/src/core/directives/ng_class.ts b/modules/angular2/src/core/directives/ng_class.ts
@@ -126,6 +126,9 @@ export class NgClass implements DoCheck, OnDestroy {
   }
 
   private _toggleClass(className: string, enabled): void {
-    this._renderer.setElementClass(this._ngEl, className, enabled);
+    className = className.trim();
+    if (className.length > 0) {
+      this._renderer.setElementClass(this._ngEl, className, enabled);
+    }
   }
 }
diff --git a/modules/angular2/test/core/directives/ng_class_spec.ts b/modules/angular2/test/core/directives/ng_class_spec.ts
@@ -218,6 +218,36 @@ export function main() {
                  rootTC.debugElement.componentInstance.arrExpr = ['bar'];
                  detectChangesAndCheck(rootTC, 'ng-binding foo bar');
 
+                 async.done();
+               });
+         }));
+
+      it('should ignore empty or blank class names',
+         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
+           var template = '<div class="foo" [ng-class]="arrExpr"></div>';
+
+           tcb.overrideTemplate(TestComponent, template)
+               .createAsync(TestComponent)
+               .then((rootTC) => {
+
+                 rootTC.debugElement.componentInstance.arrExpr = ['', '  '];
+                 detectChangesAndCheck(rootTC, 'foo ng-binding');
+
+                 async.done();
+               });
+         }));
+
+      it('should trim blanks from class names',
+         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
+           var template = '<div class="foo" [ng-class]="arrExpr"></div>';
+
+           tcb.overrideTemplate(TestComponent, template)
+               .createAsync(TestComponent)
+               .then((rootTC) => {
+
+                 rootTC.debugElement.componentInstance.arrExpr = [' bar  '];
+                 detectChangesAndCheck(rootTC, 'foo ng-binding bar');
+
                  async.done();
                });
          }));
@@ -289,6 +319,20 @@ export function main() {
                });
          }));
 
+      it('should ignore empty and blank strings',
+         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
+           var template = `<div class="foo" [ng-class]="strExpr"></div>`;
+
+           tcb.overrideTemplate(TestComponent, template)
+               .createAsync(TestComponent)
+               .then((rootTC) => {
+                 rootTC.debugElement.componentInstance.strExpr = '';
+                 detectChangesAndCheck(rootTC, 'foo ng-binding');
+
+                 async.done();
+               });
+         }));
+
     });
 
     describe('cooperation with other class-changing constructs', () => {

Original file line number	Diff line number	Diff line change
`@@ -126,6 +126,9 @@ export class NgClass implements DoCheck, OnDestroy {`
`126`	`126`	`}`
`127`	`127`
`128`	`128`	`private _toggleClass(className: string, enabled): void {`
`129`		`- this._renderer.setElementClass(this._ngEl, className, enabled);`
	`129`	`+ className = className.trim();`
	`130`	`+ if (className.length > 0) {`
	`131`	`+ this._renderer.setElementClass(this._ngEl, className, enabled);`
	`132`	`+ }`
`130`	`133`	`}`
`131`	`134`	`}`