Dynamically load HTML template in angular2

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

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

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