How To Use the innerHTML Property Binding in Angular

Updated on March 19, 2021


How To Use the innerHTML Property Binding in Angular


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.


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


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.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products

About the authors
Default avatar


Still looking for an answer?

Ask a questionSearch for more help

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!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Featured on Community

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel