title: Angular 2 Renderer2 prependChild-like behavior
body: <p>How can I insert a new child as the first child of a parent using Angular 2' Renderer2?</p>
  
  <p>Given <code>&lt;div&gt; &lt;span&gt;Foobar&lt;/span&gt; &lt;/div&gt;</code> I want to insert an element before the <code>span</code> so it becomes <code>&lt;div&gt; &lt;span&gt;New element&lt;/span&gt; &lt;span&gt;Foobar&lt;/span&gt; &lt;/div&gt;</code>.</p>
  
  <p>Problem is that I only have access to the containing div and I cannot figure out how to either 'prepend' the new element (as jQuery can/would do it), or find the first child element of the parent so that I can use <code>insertBefore</code> from the renderer.</p>
  
  <p>I tried using <code>ContentChild</code> to get the first element, but it gives <code>null</code>, and I guess that it because this is all going on in a <em>directive</em> and I don't know the content of the native element.</p>
  
  <p>Usage is this; a directive that adds an icon tag as the first child of an element, eg <code>&lt;button myIconDirective&gt;Foobar&lt;/button&gt;</code> should become <code>&lt;button myIconDirective&gt;&lt;i class="icon-classes"&gt;&lt;/i&gt;Foobar&lt;/button&gt;</code>.</p>
  
  <p>Here's a plunker to tinker with, the +'s are currently at the wrong side of the text :) <a href="http://plnkr.co/edit/mknH3yeTnFpepaIwmHUN" rel="noreferrer">http://plnkr.co/edit/mknH3yeTnFpepaIwmHUN</a></p>