Add attribute with renderer using a directive
<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>