typescript - Output HTML from an Aurelia TS variable into the view

Question

I have an Aurelia app that works something like so:

test.ts

private testing:string;

// The constructor and other methods get the testing from the database that contains clean/sanitized HTML (not malious or entered by a user)

// An example:
testing = "<i>Source:</i>This code is<br />old but it is okay.";

Then in the view I want to have the HTML render as opposed to the string.

test.html

<div>${testing}</div>

The issue is that the output on screen thus contains the <i>, </i>, and <br /> tags but I want it to behave as normal HTML when it is rendered.

How is this accomplished in Aurelia? The data is safe (no script tags are ever included).

question from:https://stackoverflow.com/questions/65626445/output-html-from-an-aurelia-ts-variable-into-the-view

Answer 1

Instead of binding to the content of the div, you could bind to the inner html. This is done the following way:

<div innerHtml.bind="testing"></div>

Best wishes.

Cristian