feat(compiler): allow binding to className using class alias

Closes angular#2364
lingniker · Aug 12, 2015 · a7a1851 · a7a1851
1 parent f2f4b90
commit a7a1851
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 1 deletion.
diff --git a/modules/angular2/src/dom/browser_adapter.dart b/modules/angular2/src/dom/browser_adapter.dart
@@ -157,6 +157,7 @@ class BrowserDomAdapter extends GenericBrowserDomAdapter {
 
   @override
   Map<String, String> get attrToPropMap => const <String, String>{
+        'class': 'className',
         'innerHtml': 'innerHTML',
         'readonly': 'readOnly',
         'tabindex': 'tabIndex',

diff --git a/modules/angular2/src/dom/browser_adapter.ts b/modules/angular2/src/dom/browser_adapter.ts
@@ -3,7 +3,12 @@ import {isBlank, isPresent, global} from 'angular2/src/facade/lang';
 import {setRootDomAdapter} from './dom_adapter';
 import {GenericBrowserDomAdapter} from './generic_browser_adapter';
 
-var _attrToPropMap = {'innerHtml': 'innerHTML', 'readonly': 'readOnly', 'tabindex': 'tabIndex'};
+var _attrToPropMap = {
+  'class': 'className',
+  'innerHtml': 'innerHTML',
+  'readonly': 'readOnly',
+  'tabindex': 'tabIndex'
+};
 
 const DOM_KEY_LOCATION_NUMPAD = 3;
 

diff --git a/modules/angular2/src/dom/parse5_adapter.ts b/modules/angular2/src/dom/parse5_adapter.ts
@@ -13,6 +13,7 @@ import {BaseException, isPresent, isBlank, global} from 'angular2/src/facade/lan
 import {SelectorMatcher, CssSelector} from 'angular2/src/render/dom/compiler/selector';
 
 var _attrToPropMap = {
+  'class': 'className',
   'innerHtml': 'innerHTML',
   'readonly': 'readOnly',
   'tabindex': 'tabIndex',
@@ -37,6 +38,8 @@ export class Parse5DomAdapter extends DomAdapter {
   setProperty(el: /*element*/ any, name: string, value: any) {
     if (name === 'innerHTML') {
       this.setInnerHTML(el, value);
+    } else if (name === 'className') {
+      el.attribs["class"] = el.className = value;
     } else {
       el[name] = value;
     }

diff --git a/modules/angular2/test/core/compiler/integration_spec.ts b/modules/angular2/test/core/compiler/integration_spec.ts
@@ -212,6 +212,26 @@ export function main() {
                });
          }));
 
+      it('should consume binding to className using class alias',
+         inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
+           tcb.overrideView(
+                  MyComp,
+                  new viewAnn.View({template: '<div class="initial" [class]="ctxProp"></div>'}))
+
+               .createAsync(MyComp)
+               .then((rootTC) => {
+                 var nativeEl = rootTC.componentViewChildren[0].nativeElement;
+                 rootTC.componentInstance.ctxProp = 'foo bar';
+                 rootTC.detectChanges();
+
+                 expect(nativeEl).toHaveCssClass('foo');
+                 expect(nativeEl).toHaveCssClass('bar');
+                 expect(nativeEl).not.toHaveCssClass('initial');
+
+                 async.done();
+               });
+         }));
+
       it('should consume directive watch expression change.',
          inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
            var tpl = '<div>' +

diff --git a/modules/angular2/test/render/dom/view/proto_view_builder_spec.ts b/modules/angular2/test/render/dom/view/proto_view_builder_spec.ts
@@ -104,6 +104,12 @@ export function main() {
         var pv = builder.build(new DomElementSchemaRegistry(), templateCloner);
         expect(pv.elementBinders[0].propertyBindings[0].property).toEqual('readOnly');
       });
+
+      it('should normalize "class" to "className"', () => {
+        builder.bindElement(el('<div></div>')).bindProperty('class', emptyExpr());
+        var pv = builder.build(new DomElementSchemaRegistry(), templateCloner);
+        expect(pv.elementBinders[0].propertyBindings[0].property).toEqual('className');
+      });
     });
 
     describe('property binding', () => {