<p dir="auto">I think Angular 2 is missing a way to retrieve innerHTML of the original element</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;foo&gt;SOME TEXT HERE&lt;/foo&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">foo</span><span class="pl-kos">&gt;</span>SOME TEXT HERE<span class="pl-kos">&lt;/</span><span class="pl-ent">foo</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">I know I can render the original content with <code class="notranslate">&lt;ng-content&gt;</code></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="@Component({
    selector: 'foo',
    template: '&lt;ng-content&gt;&lt;/ng-content&gt;'
})"><pre class="notranslate">@<span class="pl-v">Component</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
    <span class="pl-c1">selector</span>: <span class="pl-s">'foo'</span><span class="pl-kos">,</span>
    <span class="pl-c1">template</span>: <span class="pl-s">'&lt;ng-content&gt;&lt;/ng-content&gt;'</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span></pre></div>
<p dir="auto">However there is no way I can retrieve the original content in constructor, or anywhere in the code.<br>
The <code class="notranslate">@Input</code> is only able to access attribute, but not inner HTML.<br>
And the <code class="notranslate">ElementRef</code> in constructor is a already modified element.<br>
May I know what is the proper way to get inner HTML of the element?</p>
<p dir="auto">Use case:<br>
Angular Material has a directive called <code class="notranslate">md-icon</code> that lets the user embed SVG content via URL:</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;md-icon svg-src=&quot;../img/puppy.svg&quot;&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">md-icon</span> <span class="pl-c1">svg-src</span>="<span class="pl-s">../img/puppy.svg</span>"<span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">We need to be able to build a directive in angular 2 that directly embeds content in this way. Using a binding on innerHTML is possible, but susceptible to XSS and would require ugly string manipulation of DOM-like content.</p>