I'm using Angular CLI v13.3.6 with Node v16.12.0 and I've a problem when I use innerHTML property.

I'm using Angular CLI v13.3.6 with Node v16.12.0. In typescript file I've a variable with an ordered list like this:

let myText = "<ol><li>first</li><li>second</li></ol>";

I need to show this text in a disabled div, so this is the code that I'm using in the html file:

<div id="myId" [innerHTML]="myText" disabled></div>

The result is that the text is shown but the numbers not. The same issue is present when I use the unordered lists. How can I do?

CodePudding user response：

For security reasons, Angular compiler does not accept any string to be injected as HTML. You can bypass this by using DOMSanitizer to "trust" the string and parse it as valid HTML.

You will have to import DomSanitizer and inject it in yopur constructor like:

import { DomSanitizer } from '@angular/platform-browser';

constructor(private readonly domSanitizer: DomSanitizer) { }

And then use DomSanitizer to trust your string to parse it as HTML. You can use like this:

this.domSanitizer.bypassSecurityTrustHtml(YOUR_STRING_HTML);

CodePudding user response：

This has nothing to do with Sanitize html. It is CSS issue.

So to avoid overwritten CSS. You could try:

• Creating a brand new angular app: ng new. This way no third party CSS involved
• Open the app in Incognito/Anonymous mode, this will help prevent any browser extensions to interfere with your app