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?

did you try this [innerHTML]="my_code_snippet" on the code container? — mxr7350
– mxr7350, Commented Mar 13, 2018 at 11:28
Hi, I have added the <pre> tag an it seems to be working. Thanks. [InnerHTML] also works fine. — Node_Ninja
– Node_Ninja, Commented Mar 13, 2018 at 11:35
I have used the <pre> tag, it is not working even after that — vikas etagi
– vikas etagi, Commented May 29, 2018 at 6:51

NDavis · Accepted Answer · 2020-05-19 22:45:44Z

1

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

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

answered May 19, 2020 at 22:45

NDavis

1,2272 gold badges16 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

NDavis Over a year ago

You may still have issues displaying curly braces because of this: github.com/angular/angular/issues/11859

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related