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

angular, javascript

Solution

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.

Problem

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

Original source

Related problems