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

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 3

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;
        }
      );
  }
}

`