How do I display HTML inside an Angular binding?

Maybe you too have asked yourself this question. The short answer is innerHtml. To understand more, continue on.

First let’s talk about why you’d want to bind HTML within an Angular component. You may have some user generated HTML that you want to render within the dom. You may even be getting HTML back in an API response. Or you could have some HTML that needs to be dynamically rendered.

So how does it work?

innerHtml is an already existing HTML element attribute that Angular is able to bind to using square brackets ( [ & ] ). For example, in your template you may have something like this:

Is this something I should do?

Maybe, maybe not. For user-generated HTML or HTML coming from an API response, there may not be another option. For dynamically rendered HTML, there is probably a different Angular friendly option.

Allowing users or an external API to dictate the HTML rendered in your application should probably be cause for some hesitation. However, Angular does provide some extra security around binding HTML content by sanitizing the HTML before rendering it. If the HTML value contains a <script> tag, Angular by default will not render it as HTML.

Is this something I should do?

Maybe, maybe not. For user-generated HTML or HTML coming from an API response, there may not be another option. For dynamically rendered HTML, there is probably a different Angular friendly option.

Allowing users or an external API to dictate the HTML rendered in your application should probably be cause for some hesitation. However, Angular does provide some extra security around binding HTML content by sanitizing the HTML before rendering it. If the HTML value contains a <script> tag, Angular by default will not render it as HTML.

If you attempt to render a <script> tag through interpolation ({{ & }}), Angular will render the value as text. If you attempt to render it using property binding, Angular ignores the value in the template and logs this warning in the console:

Angular is using a class called DomSanitizer to handle all of this but it does come with some drawbacks. For our potential use case of rendering user generated HTML, if the user has added a <style> tag or inline style on their elements, it will not have an effect as you can see in this StackBlitz example.

Help!

One way to overcome this challenge is to create your own sanitizing Pipe:

By using the DomSanitizer’s bypassSecurityTrustHtml method, you will do just that: bypass Angular’s default security/sanitation and trust the entered HTML value. In the template, add your pipe:

And your styles will take effect. See the entire example here.

An alternative

If you’re dynamically rendering some HTML content in your application you may already be using innerHtml, but can this be done in a safer way? Let’s take a look at this example.

In this application, I’m using the translation library ngx-translate. I have a header, language selector, and a dynamically rendered link.

To refactor this to an approach without innerHtml,

1. Update each translation file to have “SXM_LINK.TEXT”, “SXM_LINK.LANG”, and “SXM_LINK.URL” instead of “SXM_LINK”:

With innerHtml:

Without:

2. Update the component template to use an <a> tag with those translation keys in place of the <div> using the innerHtml attribute:

With innerHtml:

Without:

3. Remove the safeHtml pipe and any reference to it.

Here’s a StackBlitz of the finished refactor: https://stackblitz.com/edit/ngx-translate-without-inner-html

In summary

Displaying HTML within an Angular binding can be a very useful strategy, but should be implemented with caution. I’ve discussed a couple of options for using innerHtml safely, as well as a strategy for refactoring away from innerHtml and avoiding risk altogether.