How to display Typescript code in HTML

Question

I want to display the component code in an Html template, not the value generated by the code, but the actual code.

like this

import { Injectable } from '@angular/core'; import { Resolve, ActivatedRouteSnapshot } from '@angular/router'; import {CompetitionService} from "../shared/competition.service"; import {Observable} from "rxjs"; @Injectable() export class TableResolve implements Resolve<any> { constructor(private competitionService:CompetitionService) {} resolve(route: ActivatedRouteSnapshot):Observable<> { return this.competitionService.getTeams(route.params['id']); } } 

All this code, as they appear in stackoverflow in the question section. I tried using <pre> and <code> , but no one works, I get this error in the console.

 Error: Template parse errors: Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it.) 

But if I need to avoid this for everyone {this is problematic, please help?

Answer 1

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

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

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

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

Or, if you do not want to use this library, you can use ng2-prism .

This is the component library of the component that highlights Angular2.