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:
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 & <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.
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.
Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest.
Sign upClick below to sign up and get $100 of credit to try our products over 60 days!