How to load the ng-template in separate file?

Question

In below sample, I have used ng-template like below and it is working fine.

Sample link: click here

<ng-template #template let-dataSource="">
  <span *ngIf="dataSource.iconCss" class="e-menu-icon {{dataSource.iconCss}}"></span> {{dataSource.header}} {{dataSource.text}}
  <span *ngIf="dataSource.templateHeader" class="e-login-content">
        <button ejs-button cssClass="e-info">Sign In</button>
      </span>
</ng-template>

But I want to create a new file for ng-template content and I want to use it in another file. I have tried like below but not working. Please help me find a solution for this case.

template.html

<ng-template #template let-dataSource="">
  <span *ngIf="dataSource.iconCss" class="e-menu-icon {{dataSource.iconCss}}"></span>
  {{dataSource.header}} {{dataSource.text}}
  <span *ngIf="dataSource.templateHeader" class="e-login-content">
    <button ejs-button cssClass="e-info">Sign In</button>
  </span>
</ng-template>

default.html

<div class="control-section">
  <ejs-menu #menu [items]='dataSource' [fields]='menuFields'>
    <ng-container *ngTemplateOutlet="template;"></ng-container>
  </ejs-menu>
</div>

Sample 2: sample 2

ref stackoverflow question: angular2 ng-template in a separate file

Answer 1

i got an answer for this question from github angular please check this https://github.com/angular/angular/issues/27503

Answer:

step1:

i have initialized my template as a new component as like below

template.component.ts

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

@Component({
  selector: 'app-device',
  template: `
  <span *ngIf="dataSource.iconCss" class="e-menu-icon {{dataSource.iconCss}}"></span>
  {{dataSource.header}} {{dataSource.text}}
  <span *ngIf="dataSource.templateHeader" class="e-login-content">
    <button ejs-button cssClass="e-info">Sign In</button>
  </span>
`
})
export class DeviceComponent {
  @Input()
  dataSource: any;
}

Then i have used that component template in my parent component as like below

default.html

<div class="control-section">
	<ejs-menu #menu [items]='dataSource' [fields]='menuFields'>
    <ng-template #template let-dataSource>
      <app-device [dataSource]="dataSource"></app-device>
    </ng-template>
  </ejs-menu>
</div>

sample link sample click me