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

相关标签:

Answer 1

You can have a component for your templates (name it tplComponent) and inside that, create as many templates as you want. Then in other components, get an instance of tplComponent and get the template from that. Here is a question that has an example of this approach (I haven't tried that though).

Please let me know if that works.

Answer 2

You can use *ngTemplateOutlet to archive the same

Please refer the link below

ngTemplateOutlet

Answer 3

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