How to put code snippets in Angular 5 *.component.html

Question

I am working on an Angular 5 project at the moment. I am facing a tricky issue here.

I want to include some code snippets in my component.html file, through the use of the <code> tag. But doing so seems to return an processing error on the angular side. So I tried to put the code in variable on the *.component.ts file, and using data binding, display the code like this:

<code_tag>{{my_code_snippet}}</code_tag>

But now the issue is that the code always comes out as a string, and not properly formatted (for example if it is JSON code)

How should I tackle this?

Answer 1

You can tell Angular to ignore strings in the <code> element with the ngNonBindable attribute

<code ngNonBindable>
    console.log("no output");
</code>