# Render HTML snippet obtained from REST server and attach it to DOM

**URL:** <https://discourse.aurelia.io/t/render-html-snippet-obtained-from-rest-server-and-attach-it-to-dom/3073>\
**Category:** Help Requests\
**Created:** [November 20, 2019, 11:37am UTC](https://discourse.aurelia.io/t/render-html-snippet-obtained-from-rest-server-and-attach-it-to-dom/3073 "2019-11-20T11:37:26Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![subhrajyotim](https://avatars.discourse-cdn.com/v4/letter/s/ecd19e/32.png) [@subhrajyotim](https://discourse.aurelia.io/u/subhrajyotim)\
**Post date:** [November 20, 2019, 11:37am UTC](https://discourse.aurelia.io/t/render-html-snippet-obtained-from-rest-server-and-attach-it-to-dom/3073/1 "2019-11-20T11:37:27Z")

</div>

Hello,  
How can i render a html snippet that i get from a REST api, on to aurelia application DOM?

Using http client i have got the html snippet in welcome.ts (skeleton-typescript-webpack).  
How do i slap a viewmodel and “process” the HTML snippet? I also need to add this to the DOM. element.appendChild?  
Will templating APIs help or View binding apis? Please help.

I have to render a server side HTML, as part of a my UI that is being made with Aurelia. I want to treat some HTML as “dynamic” and render it on UI.

Any help in some direction would be appreciated. I dont want to repeat the templates on both server and client.

Thanks a lot.  
Subhro.

---

<div class="post-metadata">

**Author:** ![zewa666](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/zewa666/32/19_2.png) [@zewa666](https://discourse.aurelia.io/u/zewa666)\
**Post date:** [November 20, 2019, 11:54am UTC](https://discourse.aurelia.io/t/render-html-snippet-obtained-from-rest-server-and-attach-it-to-dom/3073/2 "2019-11-20T11:54:53Z")

</div>

You can enhance Dom to be treated by Aurelia. There are multiple topics about that here in discourse. E.g [Refresh bindings](https://discourse.aurelia.io/t/refresh-bindings/1172)

There is also this docs entry [https://aurelia.io/docs/fundamentals/app-configuration-and-startup#leveraging-progressive-enhancement](https://aurelia.io/docs/fundamentals/app-configuration-and-startup#leveraging-progressive-enhancement)

---

<div class="post-metadata">

**Author:** ![lancelot316](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/lancelot316/32/527_2.png) [@lancelot316](https://discourse.aurelia.io/u/lancelot316)\
**Post date:** [November 20, 2019, 1:44pm UTC](https://discourse.aurelia.io/t/render-html-snippet-obtained-from-rest-server-and-attach-it-to-dom/3073/3 "2019-11-20T13:44:13Z")

</div>

I think you will need something like this:

a template, html-fragment.html:  
`<template> <div innerhtml.bind="content"></div> </template>`

and a view model, html-fragment.ts:

```
@autoinject
export class HtmlFragment {
content: string = "";

constructor(private service: ServiceThatFetchesTheHtml) { }

attached(): void {
    this.fetchHtml();
 }

private fetchHtml(): void {
    this.service.getHtml()
      .then(response => this.content = response)
      .catch(err => LogManager.getLogger("").error(err));
  }
}`

```

[https://aurelia.io/docs/binding/basics#element-content](https://aurelia.io/docs/binding/basics#element-content)

---

<div class="post-metadata">

**Author:** ![subhrajyotim](https://avatars.discourse-cdn.com/v4/letter/s/ecd19e/32.png) [@subhrajyotim](https://discourse.aurelia.io/u/subhrajyotim)\
**Post date:** [November 20, 2019, 2:59pm UTC](https://discourse.aurelia.io/t/render-html-snippet-obtained-from-rest-server-and-attach-it-to-dom/3073/4 "2019-11-20T14:59:35Z")

</div>

Thanks, The docs says this. " Binding using the `innerhtml` attribute simply sets the element’s `innerHTML` property. The markup does not pass through Aurelia’s templating system. Binding expressions and require elements will not be evaluated." This is precisely what I want. The HTML is not just plain visual elements, there are some bindings (one way), which needs to be processed.

---

<div class="post-metadata">

**Author:** ![subhrajyotim](https://avatars.discourse-cdn.com/v4/letter/s/ecd19e/32.png) [@subhrajyotim](https://discourse.aurelia.io/u/subhrajyotim)\
**Post date:** [November 20, 2019, 3:04pm UTC](https://discourse.aurelia.io/t/render-html-snippet-obtained-from-rest-server-and-attach-it-to-dom/3073/5 "2019-11-20T15:04:58Z")

</div>

Thanks a lot, I am trying this out. A couple of questions,  
How to get the DOM from the HTML string? Using the ViewCompiler, etc?

```
const fragment = document.createRange().createContextualFragment(blob);
const eins = <EnhanceInstruction>{
        element: fragment,
        bindingContext: this.data,

    };
    this.getTemplatingEngine().enhance(eins);

```

This one does not work. I have set up innerhtml.bind (thanks to @lancelot316) for contents and “ref”  
to get element reference, and using that too wont work.

Please help.

---

<div class="post-metadata">

**Author:** ![zewa666](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/zewa666/32/19_2.png) [@zewa666](https://discourse.aurelia.io/u/zewa666)\
**Post date:** [November 20, 2019, 5:28pm UTC](https://discourse.aurelia.io/t/render-html-snippet-obtained-from-rest-server-and-attach-it-to-dom/3073/6 "2019-11-20T17:28:40Z")

</div>

So you would first Insert the String e.g via innerhtml and then enhance it. To get the set element simply make use of document.querySelector(…). You cant use ref before the element is enhanced

---

<div class="post-metadata">

**Author:** ![subhrajyotim](https://avatars.discourse-cdn.com/v4/letter/s/ecd19e/32.png) [@subhrajyotim](https://discourse.aurelia.io/u/subhrajyotim)\
**Post date:** [November 21, 2019, 4:15am UTC](https://discourse.aurelia.io/t/render-html-snippet-obtained-from-rest-server-and-attach-it-to-dom/3073/7 "2019-11-21T04:15:10Z")

</div>

Thanks a lot @zewa666, my dumbself is not able to get the bindings processed.

Here is the snippet.  
welcome.ts

```
   async attached(){
        const response = await this.http.fetch('/');
        this.templateBlob = await response.text();//bound to innerHtml
        const templatePanelArr = document.getElementById("templatePanelId");

        this.data = {
            lessor: {
                firstName:'FN lessor',
                lastName: 'LN lesser'
            },
            lessee: {
                firstName: 'LL FN',
                lastName: 'LN LL'
            },
            address: 'NDLS',
            startDate: '12/12/2019',
            endDate: '20/03/2020'
        };

        const eins = <EnhanceInstruction>{
            element: templatePanelArr,
            container: this.container,
            bindingContext: {
                message: 'This is some instruction',
                heading: this.heading,
                ...this.data
            }
        };

       this.getTemplatingEngine().enhance(eins);

       /* const factory = this.viewCompiler.compile(templatePanelArr);
        factory.create(this.container, { enhance: true });*/

    }

```

welcome.html

```
        <div innerHtml.bind="templateBlob" id="templatePanelId">
        </div>

```

HTML returned by REST API.

```
<section>
    ${heading}
    <p>
        ${message}
    </p>
    <p>
        This is a agreement between ${lessor.firstName} ${lessor.lastName} and ${lessee.firstName} ${lessee.lastName}.
    </p>
    <p>
        Signed at property address ${address}.
    </p>
    <p>
        Valid between dates ${startDate} and ${endDate}.
    </p>
</section>

```

The bindings are not processed and values does not appear.  
If i call the `enhance` on button click in the same view, something `undefined` is being returned.

```
/ **Called on click of a button in welcome.html/ts.** /
doStuff() {
        const templatePanelArr = document.getElementById("templatePanelId");
        console.log('Doing stuff.....', templatePanelArr);
        const eins = <EnhanceInstruction>{
            element: templatePanelArr,
            container: this.container,
            bindingContext: {
                message: 'This is some instruction',
                heading: this.heading,
                ...this.data
            }
        };

        this.templateEngine.enhance(eins);
        console.log('Doing stuff 2.....', templatePanelArr);
    }

```

The console output:

`<div innerhtml.bind="templateBlob" id="templatePanelId" class="au-target au-target au-target" au-target-id="21">undefined</div>`

please help. Thanks a lot for your time.

---

<div class="post-metadata">

**Author:** ![zewa666](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/zewa666/32/19_2.png) [@zewa666](https://discourse.aurelia.io/u/zewa666)\
**Post date:** [November 21, 2019, 5:43am UTC](https://discourse.aurelia.io/t/render-html-snippet-obtained-from-rest-server-and-attach-it-to-dom/3073/8 "2019-11-21T05:43:14Z")

</div>

You cannot either bind innerhtml as long as that element is not processed by Aurelia. Try doing it manually by queryselecting the div and setting innerhtml.

Edit: would help If you could replicate your scenario with a Sandbox than we can look at it more easily. [https://codesandbox.io/s/4xwp3neqn?from-embed](https://codesandbox.io/s/4xwp3neqn?from-embed)  
For the sake of the demo replace the fetch with a hardcoded string of your sample html

---

<div class="post-metadata">

**Author:** ![subhrajyotim](https://avatars.discourse-cdn.com/v4/letter/s/ecd19e/32.png) [@subhrajyotim](https://discourse.aurelia.io/u/subhrajyotim)\
**Post date:** [November 21, 2019, 12:09pm UTC](https://discourse.aurelia.io/t/render-html-snippet-obtained-from-rest-server-and-attach-it-to-dom/3073/9 "2019-11-21T12:09:37Z")

</div>

It worked!!! Aurelia magic in action!!!  
Thanks a lot @zewa666 and @lancelot316 for helping sort this out.

```
 this.templateBlob = await response.text();//no more bound to innerHtml
 const templatePanelArr = document.getElementById("templatePanelId");// getting the element.
 const templateFragment = document.createRange().createContextualFragment(this.templateBlob);//construct the DOM fragment from the tring.
 templatePanelArr.appendChild(templateFragment); // append it to the existing element.

this.templateEngine.enhance(eins); //let the magic happen!!!

```

The `data` is also bound to a form in `welcome.ts`. The above does the job, terrific!!

Thanks a lot,  
Subhro.

---

<div class="post-metadata">

**Author:** ![zewa666](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/zewa666/32/19_2.png) [@zewa666](https://discourse.aurelia.io/u/zewa666)\
**Post date:** [November 21, 2019, 2:51pm UTC](https://discourse.aurelia.io/t/render-html-snippet-obtained-from-rest-server-and-attach-it-to-dom/3073/10 "2019-11-21T14:51:33Z")

</div>

The approach with a fragment is even better. Good job 👍