Render HTML special characters in angular 13-CodePudding

I use Angular v13.

When i display text contains HTML special characters, the text shows without applying those special characters :

It shows Hello <b>world</b> instead of Hello <b>world</b>

My code :

export class FormDepartementComponent implements OnInit {
     readonly myText: string = 'Hello &lt;b&gt;world&lt;/b&gt;';
}

<div>{{ myText }}</div>

I search for a global solution and without allowing HTML tags to be rendred.

Many thanks for any help

CodePudding user response：

This answer does what you're looking for.

Essentialy you use this method (you can make a pipe of it) to desanitize html from your variable.

htmlDecode(input: string): string {
 var e = document.createElement('div');
 e.innerHTML = input;
 return e.childNodes[0].nodeValue;
}

CodePudding user response：

You can make use of the innerHTML property binding

<div [innerHtml]="myText" ></div>