feat(compiler): allow setting attributes on a host element

Closes #1402

modules/angular2/test/core/compiler/integration_spec.js

@@ -617,6 +617,21 @@ export function main() {
         });
       }));
 
+      it('should support updating host element via hostAttributes', inject([TestBed, AsyncTestCompleter], (tb, async) => {
+        tb.overrideView(MyComp, new View({
+          template: '<div update-host-attributes></div>',
+          directives: [DirectiveUpdatingHostAttributes]
+        }));
+
+        tb.createView(MyComp, {context: ctx}).then((view) => {
+          view.detectChanges();
+
+          expect(DOM.getAttribute(view.rootNodes[0], "role")).toEqual("button");
+
+          async.done();
+        });
+      }));
+
       it('should support updating host element via hostProperties', inject([TestBed, AsyncTestCompleter], (tb, async) => {
         tb.overrideView(MyComp, new View({
           template: '<div update-host-properties></div>',
@@ -1095,6 +1110,15 @@ class DirectiveEmitingEvent {
   }
 }
 
+@Directive({
+  selector: '[update-host-attributes]',
+  hostAttributes: {
+    'role' : 'button'
+  }
+})
+class DirectiveUpdatingHostAttributes {
+}
+
 @Directive({
   selector: '[update-host-properties]',
   hostProperties: {

modules/angular2/test/render/dom/compiler/directive_parser_spec.js

@@ -1,6 +1,7 @@
 import {describe, beforeEach, it, xit, expect, iit, ddescribe, el} from 'angular2/test_lib';
 import {isPresent, isBlank, assertionsEnabled} from 'angular2/src/facade/lang';
 import {ListWrapper, MapWrapper, StringMapWrapper} from 'angular2/src/facade/collection';
+import {DOM} from 'angular2/src/dom/dom_adapter';
 import {DirectiveParser} from 'angular2/src/render/dom/compiler/directive_parser';
 import {CompilePipeline} from 'angular2/src/render/dom/compiler/compile_pipeline';
 import {CompileStep} from 'angular2/src/render/dom/compiler/compile_step';
@@ -22,6 +23,7 @@ export function main() {
         decoratorWithMultipleAttrs,
         someDirectiveWithProps,
         someDirectiveWithHostProperties,
+        someDirectiveWithHostAttributes,
         someDirectiveWithEvents,
         someDirectiveWithGlobalEvents
       ];
@@ -123,6 +125,24 @@ export function main() {
       expect(ast.source).toEqual('dirProp');
     });
 
+    it('should set host element attributes', () => {
+      var element = el('<input some-decor-with-host-attrs>');
+      var results = process(element);
+
+      expect(DOM.getAttribute(results[0].element, 'attr_name')).toEqual('attr_val');
+    });
+
+    it('should not set host element attribute if an attribute already exists', () => {
+      var element = el('<input attr_name="initial" some-decor-with-host-attrs>');
+      var results = process(element);
+
+      expect(DOM.getAttribute(results[0].element, 'attr_name')).toEqual('initial');
+
+      DOM.removeAttribute(element, 'attr_name');
+      results = process(element);
+      expect(DOM.getAttribute(results[0].element, 'attr_name')).toEqual('attr_val');
+    });
+
     it('should read attribute values', () => {
       var element = el('<input some-decor-props some-attr="someValue">');
       var results = process(element);
@@ -242,6 +262,13 @@ var someDirectiveWithHostProperties = new DirectiveMetadata({
   })
 });
 
+var someDirectiveWithHostAttributes = new DirectiveMetadata({
+  selector: '[some-decor-with-host-attrs]',
+  hostAttributes: MapWrapper.createFromStringMap({
+    'attr_name': 'attr_val'
+  })
+});
+
 var someDirectiveWithEvents = new DirectiveMetadata({
   selector: '[some-decor-events]',
   hostListeners: MapWrapper.createFromStringMap({