How to display code within -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(){}
 })`

Answer 1

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.

Answer 2

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