feat(NgClass) allow multiple classes per expression

Closes #5225

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);
+      }
     }
   }
 }

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 = '<div [ng-class]="objExpr"></div>';
+
+           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 = '<div [ng-class]="objExpr"></div>';
+
+           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 = '<div [ng-class]="arrExpr"></div>';
+
+           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', () => {