How to render string with html tags in Angular 4+?

HtmlAngularRendering

Html Problem Overview


In my angular 4 app, I have a string like

comment: string;
comment = "<p><em><strong>abc</strong></em></p>";

When I serve this text in my html, like

{{comment}}

Then it displays:

<p><em><strong>abc</strong></em></p>

But I need to display the text "abc" in bold and italic form, like abc

How can I do this?

Html Solutions


Solution 1 - Html

Use one way flow syntax property binding:

<div [innerHTML]="comment"></div>

From angular docs: "Angular recognizes the value as unsafe and automatically sanitizes it, which removes the <script> tag but keeps safe content such as the <b> element."

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionShams NahidView Question on Stackoverflow
Solution 1 - HtmlHaifeng ZhangView Answer on Stackoverflow