How to display code within <code>-tag in angular2?

Question

I'd like to show code snippets within my angular2 application. But I am not able to paste simple javascript code within a code-tag.

I always need to add a second curly bracket and I have to add ngNonBindable. But I don't want to add a second bracket.

Has anyone a solution to this?

http://plnkr.co/edit/OzlHLJxgwSvUffryV3e4

this is my app.component.html:

<h1>Here is the documentation for the model:</h1>
<pre>
  <code ngNonBindable>
    export model = new Model({
      a:1,
      b:function(){}
    })
  </code>
</pre>

The User should see:

here is the documentation for the model:

export model = new Model({
     a:1,
     b:function(){}
 })`

did you try <code ngNonBindable [innerHtml]='model'></code> ? — user3180309
– user3180309, Commented Oct 19, 2016 at 13:33
yes, but i'd like to have it within the template, to have more comfort, instead of having a lot of variables with the code-content — Jan Fanslau
– Jan Fanslau, Commented Oct 19, 2016 at 14:18

Community · Accepted Answer · 2017-05-23 11:46:58Z

7

I think the simplest way is to use [innerHTML]="xxx" and hold the code in the components class

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

export class AppComponent {
  code = `
export model = new Model({
  a:1,
  b:function(){}
})
`
}

Plunker example

In RC.1 some styles can't be added using binding syntax might also be helpful.

edited May 23, 2017 at 11:46

CommunityBot

11 silver badge

answered Oct 19, 2016 at 13:40

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

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

3 Comments

Jan Fanslau Over a year ago

Well, yes, that is a possible way, but I plan to have a lot of code-snippets within the template. It would be more comfortable to have it directly within the template file.

Günter Zöchbauer Over a year ago

I guess then you need to escape every { and every } as {{'{'}} and {{'}'}}. There is an open issue as far as I remember to make ngNonBindable work here.

Jan Fanslau Over a year ago

thanx, I will use your solution above.

David Hayden · Accepted Answer · 2017-07-10 13:44:53Z

1

I was having the same issue, and ended up replacing all curly braces with a numerical character reference. e.g:

<pre>
  <code>
    export model = new Model(&#123;
      a:1,
      b:function()&#123;&#125;
    &#125;)
  </code>
</pre>

Plunker Example

answered Jul 10, 2017 at 13:44

David Hayden

111 bronze badge

Collectives™ on Stack Overflow

How to display code within <code>-tag in angular2?

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related