typescriptaureliaaurelia-templating

Output HTML from an Aurelia TS variable into the view

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).

Solution

  • 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