How to load the ng-template in separate file?

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
​

Continue reading...