How to recognize string interpolation text as HTML in an Aurelia template

Question

I'm trying to add marked-up text to a div in an Aurelia template through string interpolation, however the HTML in it is being rendered as literal text rather than as HTML. So for example:

// in view-model
htmlString = "Line 1 <br> Line 2";

// in view template
<template>
  <div>
    ${htmlString}
  </div>
</template>

gets rendered as

Line 1 <br> Line 2

and not as

Line 1  
Line 2

Is there a way do this so that the interpolated text is recognized as HTML and not as a string literal?

Answer 1

You can use

<template>
 <div innerhtml.bind="htmlString"></div>
</template>

But you need to be extremely careful in using this with any user generated HTML, as there is little, if any sanitization of the HTML that gets injected in to the DOM when using this.