diff --git a/modules/angular2/src/core/directives/ng_class.ts b/modules/angular2/src/core/directives/ng_class.ts index 779e82024a..4baa9a027f 100644 --- 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 index 9c05455718..5c3673fe42 100644 --- 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 = '
'; + + 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 = ''; + + 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 = ``; + + 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', () => {