fix(NgClass): ignore empty and blank class names

Fixes #4033 Closes #4173
angular · Sep 16, 2015 · 73351ac · 73351ac
1 parent 5bab607
commit 73351ac
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 1 deletion.
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', () => {