How to generate unrendered HTML elements on a web page using Angular 2.1.1 like stackoverflow?

Question

What I'm trying to do:

I am trying to create a web page with Angular2 that displays HTML on the screen in much the same way as many websites like stackoverflow, css tricks and w3schools (to name a few). I would like to be able to copy the code and paste it to another place after it is displayed on the screen.

What i know:

I realized that you probably have to convert all my opening tags (i.e. < ) to < and convert all my closing tags (i.e. > ) to > , however I'm still not sure what the best way to interpolate some variables in the template.

For example, I have this in a template file:

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

What I want to see (and be able to copy) in the browser:

 <div>This is my title</div> <div><p>This is my subtitle</p></div> <div> <ul> <li>Apple</li> <li>Orange</li> <li>Durian</li> </ul> </div> 

Stack overflow makes it very easy and pleasant, allowing you to select the code that you want to display on the screen and press the {} button in the editor. However, when I try to use the <pre> and <code> tags in my Angular2 application, I don’t get the same result, I don’t see real HTML elements like <div> and <li> .

Instead, I see:

 {{myTitle}} {{mySubTitle}} {{item1}} {{item2}} {{item3}} 

I used handbarsjs in the past and am familiar with this library, but I got the impression that using Angular2 eliminates the need for handlebarsjs. Does anyone know how to accomplish what I'm trying to do in Angular2 without handlebarsjs?

Answer 1

For < and > you probably need to use < and > .

For braces in wildcard expressions, you can use the ngNonBindable directive.

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

Answer 2

Use <pre> or <code> to make the HTML display 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 exit { and } (for example, as shown above)