title: Add attribute with renderer using a directive
body: <p>I want to achieve extending an HTML tag with an attribute but encapsulate this with an angular 2 component.</p>
  
  <p>Let's assume the original markup using my Angular 2 component foo</p>
  
  <pre><code>&lt;div foo="x"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>The foo attribute should transform the div like:</p>
  
  <pre><code>&lt;div some-other-fancy-attribute="x"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>First I tried implementing a directive but I could not figure out how to add another attribute to the hosting element using Renderer from angular/core. </p>
  
  <p>Then I read about Angular 2 components using an attribute selector like [foo]. I liked the idea of using a template to render some-other-fancy-attribute.</p>
  
  <p>However, the template get's rendered AFTER the tag so I end up with:</p>
  
  <pre><code>&lt;div foo="x"&gt;some-other-fancy-attribute="x"
  </code></pre>
  
  <p>Isn't there an easy way to encapsulate some attribute creation?
  Thought this is a trivial one but it gives me more headache than expected.</p>