1

I am getting fraction part of HTML code from api, want to render into DOM like below...

// getting template from backend.
let template1 = "<div class='well'><formio src='example/text.json'></formio>"; //appearing into dom, but not loading form.

// second way
let template2 = "<formio [src]='getUrl()'></formio></div>";
// calling getUrl from component.ts file.

// attaching template into DOM using appendChild() method..
const fragment = document.createRange().createContextualFragment(template);
document.getElementById('landingTemplate').appendChild(fragment);

getUrl() {
   return 'example/text.json';
}
// getUrl() not calling from HTML.
<div id="landingTemplate"></div>

so unable to render formio. Anyone have idea please help me.

Hearner
  • 2,711
  • 3
  • 17
  • 34
Omprakash Sharma
  • 409
  • 5
  • 11
  • There is no real reason to use `document.createRange().createContextualFragment(template);`, just simply do what LGSon mentioned below. – Alex Jul 06 '18 at 09:38
  • Hmm, posted an answer, still, am I right when saying, it does add the markup but your `formio` component doesn't work? – Asons Jul 06 '18 at 09:51
  • If so, I added a few links that might be helpful, and one might even be a possible duplicate... – Asons Jul 06 '18 at 10:05
  • document.createRange().createContextualFragment() and innerHtml both are giving the same results. but problem is formio not rendering by this way, while formio is working fine when directly putted into html. – Omprakash Sharma Jul 06 '18 at 10:35

1 Answers1

2

When you have HTML markup in a string, use innerHTML

document.getElementById('landingTemplate').innerHTML = template;

Updated

If it does add the markup but your formio component doesn't work? ... then here are couple links that might be what you are looking for:

Asons
  • 84,923
  • 12
  • 110
  • 165