When building an Angular 9 application with an HTML markup that you need to render.
How do you do that?
If you simply use regular binding i.e {{var}} this will encode all HTML characters. Is there a simple solution to render an HTML string in your Angular template?
You can render and sanitize an HTML string in your Angular 9 template using property binding with the innerHTML property of a div element.
Let’s consider the following htmlString variable in our Angular 9 component:
export class MyComponent {
htmlString: string = '<b>Hello Angular 9</b>';
}
We can render the HTML markup in the string variable using the following code:
<div [innerHTML]="htmlString"></div>
We’ll get the following output:
Hello Angular 9
We use property binding around the innerHTML property of the div element.
If you use interpolation i.s {{ htmlString }}, inside the div, we’ll get:
<b>Hello Angular 9</b>
Please note that in both interpolation and property binding, Angular 9 will sanitize the markup to prevent any security issues.
