Bind raw html in Aurelia

Question

Using Aurelia, I want to fill an <div> with contents of viewmodel property (lets call it htmlText) which contains html text, and I was using

<div>
${htmlText}
</div>

However, this encodes html so, instead of i.e. having paragraph or link, all tags are escaped so html can be seen as source.

Is there out of the box binder to do this?

P.S. I know that binding html into viewmodel defeats purpose of it, but some APIs return html in json so I just want to see is there easy way to use that — Goran Obradovic, Feb 01 '15 at 18:05

score 83 · Accepted Answer · edited Nov 11 '17 at 08:12

83

You can accomplish this using the innerhtml binding like so:

<div innerhtml.bind="htmlText"></div>

edited Nov 11 '17 at 08:12

Tim

answered Feb 04 '15 at 14:42

2

there is currently an issue with this binding that should be resolved in the next day or two, see here for status https://github.com/aurelia/templating-binding/issues/7 – Matthew James Davis Feb 04 '15 at 14:42
well it works for what I was trying (just researching framework at this point), and I do feel stupid now :) thanks! – Goran Obradovic Feb 04 '15 at 14:53
actually you are correct, it doesn't bind, but still, I should have tried that myself :) – Goran Obradovic Feb 04 '15 at 14:56
sure sure, don't forget to accept this answer for future users :) – Matthew James Davis Feb 04 '15 at 16:36
2

Depending on the situation it may be appropriate, for security purposes, to sanitize the html before binding it. My experience has been that sanitizing does not happen by default. To sanitize, there is a sanitizeHTML value converter. I explain that a bit more [here](http://ryanheathcote.com/2016/02/02/sanitize-html-aurelia/) – Ryan Heathcote Feb 02 '16 at 20:45
1

The purpose of the innerHTML is to allow markup and code to be injected. If you want sanitized content, use the textcontent.bind method, more here: http://aurelia.io/docs.html#/aurelia/framework/1.0.0-beta.1.1.1/doc/article/cheat-sheet/5 – Matthew James Davis Feb 02 '16 at 20:54
Camel case in html? Doesn't this go against Rob's beliefs? http://eisenbergeffect.bluespire.com/on-angular-2-and-html/ – Dustin May 27 '16 at 20:08

1 Answers1