Tutorial
innerHTML Property Binding in Angular
While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or edited it to ensure you have an error-free learning experience. It's on our list, and we're working on it! You can help us out by using the "report an issue" button at the bottom of the tutorial.
Ever had properties in your component that contain some html markup or entities that you need to display in your template? The traditional interpolation won’t work, but the innerHTML property binding comes to the rescue.
This post covers Angular 2 and up
Given a property in our component like this:
export class SomeComponent {
htmlStr: string = '<strong>The Tortoise</strong> & the Hare';
}
We can bind to it and apply the markup with something like this in our template:
<div [innerHTML]="htmlStr"></div>
The Tortoise & the Hare
With interpolation instead of the property binding, {{ htmlStr }}, inside the div, we would have gotten this instead in the rendered view:
<strong>The Tortoise</strong> & the Hare
👉 With both interpolation and property binding, Angular sanitizes the markup and prevents any script tags from being inserted.
