How to Display Typescript code in Html

Question

I want to display a component\'s code in a Html template, Not the value generated by the code but the actual code.

like this

   import { Injectable }         


        

Answer 1

Use a variable in your ts file that contains all the code and display it in html using this {{stringThatContainsAllTheCode}}

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

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

export class AppComponent {
  code = `   //type script code`
}

Or if you don't want to use this library call ng2-prism can be useful.

This is a Angular2 codeblock highlighting component library.