From 4e02e003734d46f88b1e2cc137be0da7af70b328 Mon Sep 17 00:00:00 2001
From: ericmartinezr <eric.martinez@live.cl>
Date: Tue, 10 Nov 2015 13:30:01 -0300
Subject: [PATCH] feat(NgClass) allow multiple classes per expression

Closes #5225
---
 .../src/common/directives/ng_class.ts         |  9 ++-
 .../test/common/directives/ng_class_spec.ts   | 62 +++++++++++++++++++
 2 files changed, 70 insertions(+), 1 deletion(-)

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 = '<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', () => {