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

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?

This question is related to html angular rendering

The answer is


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."


Examples related to html

Embed ruby within URL : Middleman Blog Please help me convert this script to a simple image slider Generating a list of pages (not posts) without the index file Why there is this "clear" class before footer? Is it possible to change the content HTML5 alert messages? Getting all files in directory with ajax DevTools failed to load SourceMap: Could not load content for chrome-extension How to set width of mat-table column in angular? How to open a link in new tab using angular? ERROR Error: Uncaught (in promise), Cannot match any routes. URL Segment

Examples related to angular

error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class error TS1086: An accessor cannot be declared in an ambient context in Angular 9 TS1086: An accessor cannot be declared in ambient context @angular/material/index.d.ts' is not a module Why powershell does not run Angular commands? error: This is probably not a problem with npm. There is likely additional logging output above Angular @ViewChild() error: Expected 2 arguments, but got 1 Schema validation failed with the following errors: Data path ".builders['app-shell']" should have required property 'class' Access blocked by CORS policy: Response to preflight request doesn't pass access control check origin 'http://localhost:4200' has been blocked by CORS policy in Angular7

Examples related to rendering

How to render string with html tags in Angular 4+? Unsupported major.minor version 52.0 when rendering in Android Studio failed to resolve com.android.support:appcompat-v7:22 and com.android.support:recyclerview-v7:21.1.2 Exporting PDF with jspdf not rendering CSS Convert SVG to PNG in Python In Rails, how do you render JSON using a view? How to render pdfs using C# How to render an ASP.NET MVC view as a string?