How To Use the innerHTML Property Binding in Angular

Introduction #

Angular 2+ supports an [innerHTML] property binding that will render HTML. If you were to otherwise use interpolation, it would be treated as a string.
In this article, you will be presented with how to use [innerHTML] and some considerations for usage.

Prerequisites #

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.

Step 1 — Using innerHTML #

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 & <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 & Bold Text Example

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.

Step 2 — Understanding Limitations #

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.

Note: The full list of approved HTML elements and attributes can be observed in html_sanitizer.ts.

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].

Conclusion #

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.