Inject HTML

[robhicks]

This is kind of related to 34.

I'm looking for a way to inject safe HTML into an element, like:

angular 1: angular 2: <div [innerHTML]="theHtmlString">

[davidjamesstone]

There's no support for setting HTML directly in Incremental DOM or superviews.js. The following could work using currentElement and skip.

<div skip>
  <script>
    const el = currentElement()
    el.innerHTML = data.myHtmlString
  </script>
</div>

This will compile to:

;(function () {
var __target

return function description (data) {
elementOpen("div")
  if (true) {
    skip()
  } else {
    const el = currentElement()
    el.innerHTML = data.myHtmlString
  }
elementClose("div")
}
})()

[robhicks]

Thanks! I'll give it a try.

[robhicks]

@davidjamesstone I gave it a try. It compiled as you indicated. I have the data there and the element but calling el.innerHTML = data doesn't do anything.

Any suggestions?

[robhicks]

Adding skip to the element was the problem. I changed to this and it works:

<div>
    <script>
      if (ctrl.html && ctrl.html !== '') {
        var el = currentElement();
        el.innerHTML = ctrl.html;
      }
      skip();
    </script>
  </div>

I got the idea for doing it this way from https://github.com/google/incremental-dom/issues/283