How To Use the innerHTML Property Binding in Angular

If you would like to follow along with this article, you will need:

• Some familiarity with Angular interpolation and property-binding may also be helpful.

For the purpose of this article, assume you are working with a component that contains a string consisting of a mix of plaintext and HTML entities and elements:

export class ExampleComponent {
  htmlStr: string = 'Plain Text Example &amp; <strong>Bold Text Example</strong>';
}

Let’s consider a template that uses interpolation on this string:

<div>{{ htmlStr }}</div>

After compiling, this code will produce the result:

Plain Text Example &amp; <strong>Bold Text Example</strong>

The HTML entities and HTML elements are not rendered.

Now, let’s consider a template that uses [innerHTML] property binding on this string:

<div [innerHTML]="htmlStr"></div>

After recompiling, this code will produce the result:

Plain Text Example & Bold Text Example

Observe that the HTML entities and HTML elements are rendered.

Rendering HTML typically has the potential to introduce Cross-Site Scripting (XSS). The rendered HTML could contain malicious scripts that present a security issue.

One method of addressing XSS is by restricting the kinds of HTML elements and attributes to a set of known “safe” elements and attributes.

Behind the scenes, [innerHTML] uses Angular’s DomSanitizer which uses a list of approved HTML elements and attributes.

This will restrict your [innerHTML] values from using <script> and <style> tags and style attributes. Keep this limitation in mind when choosing to use [innerHTML].

In this article, you were introduced to [innerHTML] property binding in Angular 2+. It will result in rendering the HTML markup contained in a string.

If you’d like to learn more about Angular, check out our Angular topic page for exercises and programming projects.