Dynamically load HTML template in angular2

Question

I have created a project using angular-cli which contains AppComponent as follows:

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';
}

And app.component.html as

<h1>
  Good Morning, {{title}}
</h1>

So when I build it with ng build it generates some files like this ./dist/main.bundle.js which contents some code as follows-

/* 586 */
/***/ function(module, exports) {

module.exports = "<h1>\n  Good Morning, {{title}}\n</h1>\n"

/***/ },
/* 587 */

That means, at the time of build the compiler/bundle-er is reading the html file and concatenating those into the generated js file.

But in my case the html is also dynamic and content-driven from server side. Lets say, instead of html, my template file is app.component.jsp and residing on some different server or folder altogether.

Also that JSP file sometimes returns <h1>Good Morning, {{title}}</h1> and sometimes <h1>Good Afternoon, {{title}}</h1> depending on current server time.

How to achieve this functionality?

What I understand is that, I need to define some kind of loader function say : loadDynamicTemplate(template_url)

and need to use that loader-function on Component decorator template property. In that case, when the main.bundle.JS is generated, it will use that function also. So in runtime angular will call this function and load the HTML by ajax and use it.

Update 1

Here I found some difference between SystemJS and Webpack . I also found we can load the HTML files in run-time if we can use SystemJS. So I believe this problem can be solved with SystemJS configuration. But for that another problem comes into play, though I believe that could be a separate question. So I posted a new question to sort it out here .

Probably if that question get solved I will try with SystemJS and then post solution here if it helps.

Answer 1

You could use [innerHtml] in a my-template component with something like this (I didn't test) :

@Component({
    selector: 'my-template',
    template: `
<div [innerHtml]="myTemplate">
</div>
`})
export public class MyTemplate {
    private myTemplate: any = "";
    @Input() url: string;
    constructor(http: Http) {
        http.get("/path-to-your-jsp").map((html:any) => this.myTemplate = html);
    }
}

Answer 2

To interpolate a template with some Good Morning, {{title}} , you may use Suguru Inatomi's "ng-dynamic" component.

First you have to install it :

npm install --save ng-dynamic

Then import into your NgModule :

@NgModule({
  imports: [
    ...
    DynamicComponentModule.forRoot({}),
    ...
  ],
  ...
})
export class AppModule {}    

Finally use it like this :

@Component({
  selector: 'app-root',
  template: '<div *dynamicComponent="template; context: bindings;"></div>'
})
export class AppComponent {
  bindings: any = {title: "Chuck Norris"};
  template: string = `
    <h1>Good Morning, {{title}}</h1>
  `;
  constructor(http: Http) {
    http.get("/path-to-your-jsp").map((html:string) => this.template = html); //<- You may set bindings in request headers...
  }
}

You could use components in your template by defining a SharedModule. I added a custom "my-button" with succes like in the documentation example here : https://github.com/laco0416/ng-dynamic

Answer 3

worked with angular 6

import { Component, Input } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  template: `
            <div [innerHtml]="myTemplate">
            </div>
          `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  private myTemplate: any = '';
  constructor(http: HttpClient) {
    http.get('/service-path', {responseType: 'text'}).subscribe(data => this.myTemplate = data);
  }
}

Answer 4

It appears that the way to do this now is to set the responseType when you make your request. HttpClient-Requesting non-JSON data `

@Component({
  selector: 'my-template',
  template: '<div [innerHtml]="myTemplate"></div>'
})
export public class MyTemplate {
  private myTemplate: any = "";
  @Input() url: string;
  constructor(http: Http) {
    http.get("/path-to-your-jsp", { responseType: 'text' })
      .subscribe(
        (data: string) => {
          this.myTemplate = html;
        }
      );
  }
}

`

Answer 5

Why not have all the template in one file and display them according to the condition.. Like your ./app.component.html will look like:

<div *ngIf="isWorld" >
  <h1>  Hello World </h1>
</div>
<div *ngIf="isUniverse" >
  <h1>  Hello Universe </h1>
</div>

Any idea on its effect on build time/size?