// Tutorial //

How To Use the innerHTML Property Binding in Angular

Published on November 8, 2016 · Updated on March 19, 2021
Default avatar
By Alligator.io
Developer and author at DigitalOcean.
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:

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

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.

If you’ve enjoyed this tutorial and our broader community, consider checking out our DigitalOcean products which can also help you achieve your development goals.

Learn more here


About the authors
Default avatar
Developer and author at DigitalOcean.

Still looking for an answer?

Was this helpful?
Leave a comment

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!