CODEWITHSUNDEEP
angular
Michel
Michel

Reputation: 23635

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

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: &lt;div class="name">&#123;&#123; name &#125;&#125; &lt;/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>

Upvotes: 2

Views: 540

Answers (2)

Ntwobike
Ntwobike

Reputation: 2751

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)">]]>

Upvotes: 2

Tommy
Tommy

Reputation: 2453

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>'
}

Upvotes: 0

Related Questions