How to generate unrendered HTML elements on web page with Angular 2.1.1 like stackoverflow?
<p><strong>What I am trying to do:</strong></p>

<p>I am attempting to create a web page with Angular2 which shows HTML on the screen in much the same way many websites do such as stackoverflow, css-tricks, and and w3schools (to name a few).  I would like to be able to copy the code and paste it somewhere else after its shown on screen.</p>

<p><strong>What I know:</strong></p>

<p>I have come to realize that it will probably be necessary to convert all of my opening tags ( i.e., <code>&lt;</code> ) to <code>&amp;lt</code> and to convert all of my closing tags ( i.e., <code>&gt;</code> ) to <code>&amp;gt</code>, however I am still not sure what the best way to interpolate some variables into the template.</p>

<p><strong>For example, I have this in my template file:</strong></p>

<pre><code>&lt;div&gt;{{myTitle}}&lt;/div&gt;
&lt;div&gt;&lt;p&gt;{{mySubTitle}}&lt;/p&gt;&lt;/div&gt;
&lt;div&gt;
&lt;ul&gt;
&lt;li&gt;{{item1}}&lt;/li&gt;
&lt;li&gt;{{item2}}&lt;/li&gt;
&lt;li&gt;{{item3}}&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<p><strong>What I want to see (and be able to copy) in the browser:</strong></p>

<pre><code>&lt;div&gt;This is my title&lt;/div&gt;
&lt;div&gt;&lt;p&gt;This is my subtitle&lt;/p&gt;&lt;/div&gt;
&lt;div&gt;
&lt;ul&gt;
&lt;li&gt;Apple&lt;/li&gt;
&lt;li&gt;Orange&lt;/li&gt;
&lt;li&gt;Durian&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<p>Stack overflow makes this really easy and nice to accomplish by letting you highlight the code you want to display on screen and clicking the <code>{}</code> button in the editor.  However, when I try using the <code>&lt;pre&gt;</code> and <code>&lt;code&gt;</code> tags in my Angular2 app, I do not get the same result, I cannot see the actual HTML elements like <code>&lt;div&gt;</code> and <code>&lt;li&gt;</code>.</p>

<p><strong>Instead what I see is:</strong></p>

<pre><code>{{myTitle}}
{{mySubTitle}}
{{item1}}
{{item2}}
{{item3}}
</code></pre>

<p>I have used <em>handlebarsjs</em> in the past and am familiar with that library but I was under the impression that using <em>Angular2</em> would eliminate the need for <em>handlebarsjs</em>.  Does anyone know how to accomplish what I am trying to do in <em>Angular2</em> without <em>handlebarsjs</em>?</p>