Are you trying to display HTML character references on your Angular UI only to discover that the application spits out the hexadecimal or decimal code instead of the actual character?

In other words, are your users seeing something like this: " when they should see a quote symbol?

Fortunately, there's a way to fix that.

And in this guide, I'll show you how to do it.

You Need an Innie

To fix the problem, you need to use an innie.

That's what I call it when you opt for an innerHTML property binding instead of just displaying the text as-is.

If you're seeing raw character codes in your output, chances are pretty good that you're doing something like this:


If the snippet property of that row object includes those HTML character references, then that's exactly what you'll see on the screen.

So go with an innie instead:

<td [innerHTML]="row.snippet"></td>

That'll do it.

That type of property binding is like setting the innerHTML property via JavaScript. You've probably done that a time or two in your life (especially if you've been working with client-side tech for a while).

Note how you don't have to put anything in between the <td> tags, either. Angular will populate that part of the output for you.

Just keep in mind: you open the door to cross-site scripting (XSS) when you go this route. So make sure your website is hardened.

One thing you can do to reduce the risk: stip out any <style> and <script> tags from the HTML. 

And heck, if all you intend to do is display plain text, you can get away with stripping out all tags. 

Yeah, I know that Angular will sanitize the HTML to prevent XSS. But I don't want you to trust that. Do your own due diligence.

So by all means, be sure to talk to a data security consultant before following this advice.

Wrapping It Up

Now you don't have to cuss any more. Instead, you can display those HTML character references to users the way they were meant to be displayed.

Just make sure you pay close attention to your security requirements.

And have fun!

Photo by Tranmautritam from Pexels