Show Angular code and HTML in an Angular page (not parsed)

Question

I want to show some example Angular code and HTML in my angular page, but whatever I do, Angular tries to parse it.

I've tried in <code>, in <pre> and even this: <div class="name">{{ name }} </div>

but even then it tries to bind to 'name'.

I don't want to do it via any binding, I just want to type the HTML in the components HTML page.

Maybe a better example: when I paste this text in the HTML, I still get an input element, I just want to show the HTML (from input to box.value).

<pre><code><input #box (keyup.enter)="onEnter(box.value)"></code></pre>

stackoverflow.com/questions/4611591/… ?

Eliseo
– Eliseo

2018-10-02 11:12:07 +00:00
Commented Oct 2, 2018 at 11:12 — Eliseo
– Eliseo, Commented Oct 2, 2018 at 11:12

Ntwobike · Accepted Answer · 2018-10-02 13:15:01Z

2

You can make a variable in the component file

public htmlSnippt = `<input #box (keyup.enter)="onEnter(box.value)">`;

Then use it in the html

<pre>
   {{htmlSnippt}}
</pre>

in XHTML you can use CDATA

<![CDATA[<input #box (keyup.enter)="onEnter(box.value)">]]>

edited Oct 2, 2018 at 13:15

answered Oct 2, 2018 at 11:17

Ntwobike

2,7691 gold badge24 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Michel Over a year ago

Is there also a way that I can type it directlly in the HTML?

Michel Over a year ago

Nice, this works in a <pre> but then I loose the code formatting. When I put it in <code> it shows the code formatting but I loose the HTML tags....

Ntwobike Over a year ago

you can CDATA as pure XHTML afaik, check the answer again @Michel

Tommy · Accepted Answer · 2018-10-02 12:17:20Z

0

Try this:

<pre>
  <code [innerHTML]="someCode"></code>
</pre>

Component:

export class SomeComponent {
  someCode = 'export model = new Model({
     a:function(){}
     b:4
  })'
}

Update to properly should html tags

<pre>
  <code>{{someCode}}</code>
</pre>

<pre>
  <code>{{someOtherCode}}</code>
</pre>

Component

export class SomeComponent  {
  someCode = 'export model = new Model({a:function(){}b:4})'
  someOtherCode = '<div>some html</div>'
}

edited Oct 2, 2018 at 12:17

answered Oct 2, 2018 at 11:14

Tommy

2,4731 gold badge25 silver badges51 bronze badges

2 Comments

Michel Over a year ago

this doesn't work when I add a <DIV> tag in the code.

Tommy Over a year ago

Now it works even with html tags. See updated answer

Collectives™ on Stack Overflow

Show Angular code and HTML in an Angular page (not parsed)

2 Answers 2

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related