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\';         


        

Answer 1

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: '
'
})
export class AppComponent {
  bindings: any = {title: "Chuck Norris"};
  template: string = `
    
Good Morning, {{title}}
  `;
  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