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>

https://stackoverflow.com/questions/4611591/code-vs-pre-vs-samp-for-inline-and-block-code-snippets ? — Eliseo, Oct 02 '18 at 11:12

Ntwobike · Answer 1 · 2018-10-02T13:15:01.153

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 02 '18 at 13:15

answered Oct 02 '18 at 11:17

Ntwobike

Is there also a way that I can type it directlly in the HTML? – Michel Oct 02 '18 at 12:04

Nice, this works in a

 but then I loose the code formatting. When I put it in  it shows the code formatting but I loose the HTML tags....

– Michel Oct 02 '18 at 12:14

you can CDATA as pure XHTML afaik, check the answer again @Michel – Ntwobike Oct 02 '18 at 13:09

Tommy · Answer 2 · 2018-10-02T12:17:20.123

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 02 '18 at 12:17

answered Oct 02 '18 at 11:14

Tommy

this doesn't work when I add a
tag in the code.
– Michel Oct 02 '18 at 12:11
Now it works even with html tags. See updated answer – Tommy Oct 02 '18 at 12:18

2 Answers2