Table of Contents

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

innerhtml illustration for: 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 & <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:

<!– markdown exception, double amp necessary –>

> Plain Text Example &amp;amp; &lt;strong&gt;Bold Text Example&lt;/strong&gt;

The HTML entities and HTML elements are not rendered.

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

				
					
&lt;div [innerHTML]="htmlStr"&gt;&lt;/div&gt;

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.