How To Generate Unrendered Html Elements On Web Page With Angular 2.1.1 Like Stackoverflow?

What I am trying to do: 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, a

Solution 1:

For < and > you'll probably need to use &lt and &gt.

For the braces in template expressions you may want to use ngNonBindable directive.

<div ngNonBindable> {{myTitle}} </div>

Solution 2:

Use <pre> or <code> for HTML to become rendered verbatim.

<pre ngNonBindable>
  <div>{{'{{'}}myTitle{{'}}'}}</div>
  <div><p>{{'{{'}}mySubTitle{{'{{'}}</p></div>
  <div>
  <ul>
  <li>{{'{{'}}item1{{'{{'}}</li>
  <li>{{'{{'}}item2{{'{{'}}</li>
  <li>{{'{{'}}item3{{'{{'}}</li>
  </ul>
  </div>
</pre>

You need to escape { and } (for example like shown above)