diff --git a/modules/angular2/src/common/directives/ng_class.ts b/modules/angular2/src/common/directives/ng_class.ts index a503b98cc0..8354459567 100644 --- a/modules/angular2/src/common/directives/ng_class.ts +++ b/modules/angular2/src/common/directives/ng_class.ts @@ -164,7 +164,14 @@ export class NgClass implements DoCheck, OnDestroy { private _toggleClass(className: string, enabled): void { className = className.trim(); if (className.length > 0) { - this._renderer.setElementClass(this._ngEl, className, enabled); + if (className.indexOf(' ') > -1) { + var classes = className.split(/\s+/g); + for (var i = 0, len = classes.length; i < len; i++) { + this._renderer.setElementClass(this._ngEl, classes[i], enabled); + } + } else { + this._renderer.setElementClass(this._ngEl, className, enabled); + } } } } diff --git a/modules/angular2/test/common/directives/ng_class_spec.ts b/modules/angular2/test/common/directives/ng_class_spec.ts index 7ef9073ae1..8dad97bac1 100644 --- a/modules/angular2/test/common/directives/ng_class_spec.ts +++ b/modules/angular2/test/common/directives/ng_class_spec.ts @@ -151,6 +151,48 @@ export function main() { async.done(); }); })); + + + it('should allow multiple classes per expression', + inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { + var template = '
'; + + tcb.overrideTemplate(TestComponent, template) + .createAsync(TestComponent) + .then((fixture) => { + + fixture.debugElement.componentInstance.objExpr = { + 'bar baz': true, + 'bar1 baz1': true + }; + detectChangesAndCheck(fixture, 'bar baz bar1 baz1'); + + fixture.debugElement.componentInstance.objExpr = { + 'bar baz': false, + 'bar1 baz1': true + }; + detectChangesAndCheck(fixture, 'bar1 baz1'); + + + async.done(); + }); + })); + + it('should split by one or more spaces between classes', + inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { + var template = ''; + + tcb.overrideTemplate(TestComponent, template) + .createAsync(TestComponent) + .then((fixture) => { + + fixture.debugElement.componentInstance.objExpr = {'foo bar baz': true}; + detectChangesAndCheck(fixture, 'foo bar baz'); + + async.done(); + }); + })); + }); describe('expressions evaluating to lists', () => { @@ -251,6 +293,26 @@ export function main() { async.done(); }); })); + + + it('should allow multiple classes per item in arrays', + inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => { + var template = ''; + + tcb.overrideTemplate(TestComponent, template) + .createAsync(TestComponent) + .then((fixture) => { + + fixture.debugElement.componentInstance.arrExpr = + ['foo bar baz', 'foo1 bar1 baz1']; + detectChangesAndCheck(fixture, 'foo bar baz foo1 bar1 baz1'); + + fixture.debugElement.componentInstance.arrExpr = ['foo bar baz foobar']; + detectChangesAndCheck(fixture, 'foo bar baz foobar'); + + async.done(); + }); + })); }); describe('expressions evaluating to sets', () => {