How to dynamically add fragment at client end

[amiteshhh]

Currently we specify the fragment tag in tailor index.html to load child apps.

<fragment src="header.live.com" id="header"/> 

I want to load some of the child apps on some user action. Something like below

var html Str= '<fragment src="header.live.com" id="header"/> '
document.querSelector('xxx').innerHTML=htmlStr
//This should invoke tailor to load this fragement.. But how???

[stevoPerisic]

This is not a feature of Tailor since it is supposed to run on the server. You would be best suited to load the dynamic piece in as a 'hidden' element in the DOM and than show/hide on-demand.

[vigneshshanmugam]

As @stevoPerisic mentioned, It is not possible for Tailor to load child apps on user click with the way you are expecting. But you can do another trick to do in this way,

Set up a new route /child1 and create corresponding template for the same child.html which would look like this

<fragment src="header.live.com" id="header"/>

On user click you can simply query the endpoint /child and insert in to the HTML document.

cons response = await fetch('/child')
document.querSelector('xxx').innerHTML= response.text()

Tailor supports partial rendering which would spit only the child fragment html without any pipe logic or script. Check this test to learn more https://github.com/zalando/tailor/blob/master/tests/process-template.js#L50