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

Closes angular#2364

Author: pkozlowski-opensource

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',

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;
 

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

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>' +

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