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

Question

I want to show code snippets in an angular2 application. But I can not insert simple javascript code in the tag code.

I always need to add a second curly bracket, and I need to add ngNonBindable. But I do not want to add a second bracket.

Anyone have a solution?

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(){}
 })`

Answer 1

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

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

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

Plunger example

In RC.1, some styles cannot be added using binding syntax ; it can also be useful.

Answer 2

, . :

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