Code tag is not working in angular html template

Question

I would like to display the below snippet in my html page. I'm using angular 2.

{path: 'test', component: TestComponent}

I've added below in my template to achieve this:

<pre>
<code>{path: 'test', component: TestComponent}</code>
</pre>

When I load the template, I see below error. How do I fix this? Can't I use code tag?

directive_normalizer.js:127 Uncaught Error: Template parse errors:
Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it.) ("
        </ngb-tab>
    </ngb-tabset>
</div>[ERROR ->]"): TestComponent@31:6
Invalid ICU message. Missing '}'. ("
        </ngb-tab>
    </ngb-tabset>
</div>[ERROR ->]"): TestComponent@31:6

Answer 1

Angular is trying to parse it as expression You have to escape the '{' braces as shown below.

<pre>
<code>{{'{'}}path: 'test', component: TestComponent{{'}'}}</code>
</pre>

Answer 2

The error Message provides the solution. Do the following:

<pre>
<code>{{"{path: 'test', component: TestComponent}"}}</code>
</pre>

Through interpolation it returns a string with the content.