0

I managed to load an html dynamicallyin one component using ngTemplateOutlet.

My code is like this:

@Component({
    selector: 'nav-menu',
    template: `<template [ngTemplateOutlet]="getTemplate()"></template>    

    <template #displayTmpl>
        <td>petko</td>
        <td><button>Edit</button></td>
    </template>

     <template #editTmpl>
        <td><input type="text" value="stanko" /></td>
        <td><button>Save</button><button>Cancel</button></td>
    </template>
  `
})

export class NavMenu {
    @ViewChild('displayTmpl') displayTmpl : TemplateRef<any>;
    @ViewChild('editTmpl') editTmpl: TemplateRef<any>;

    getTemplate() {
      return this.displayTmpl;//this.displayTmpl, this.editTmpl
    }

    constructor(private authService: AuthService) { }
}

However I would like for the templates not to be included here, I would like displayTmpl and editTmpl to be two separate .html documents. How would I do that?

petko_stankoski
  • 10,459
  • 41
  • 127
  • 231
  • *There is an example how to create dynamic *template* and compile component with it - [here](http://stackoverflow.com/q/38888008/1679310). It is not about separate html documents but could show how to use dynamic components creation* – Radim Köhler Aug 31 '16 at 08:26
  • You can use DynamicComponentLoader to load dynamic components as shown: http://embed.plnkr.co/jAmMZKz2VqponmFtPpes/ instead. – Ha Hoang Aug 31 '16 at 08:48

0 Answers0