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

possible duplicate of : https://stackoverflow.com/questions/48555286/unable-to-use-ng-include-in-angular-5 — Joel Joseph, Dec 06 '18 at 06:27
you can create a separate component with your code and use the selector of the same component so that you can use it in other places as explained in the article in my comment — Joel Joseph, Dec 06 '18 at 06:35
i have already tried not working sample link: https://stackblitz.com/edit/angular-mdksym-d5f7kx?file=template.component.ts — Kumaresan Sd, Dec 06 '18 at 06:37
you will have pass data to the component or create a service to communicate between parent and child component here. in the above stackblitz you are not passing data to the component — Joel Joseph, Dec 06 '18 at 06:45

Kumaresan Sd · Accepted Answer · 2018-12-07T05:38:02.930

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

Finally you were not able to use `ngTemplateOutlet` for that ? — Adir Dayan, Nov 24 '20 at 10:23

score 2 · Answer 2 · answered Dec 06 '18 at 06:59

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.

score 1 · Answer 3 · answered Dec 06 '18 at 07:10

1

You can use *ngTemplateOutlet to archive the same

Please refer the link below

ngTemplateOutlet

answered Dec 06 '18 at 07:10

siddharth shah

1,139
1
9
17

I have tried not working. sample link: https://stackblitz.com/edit/angular-mdksym-5uqyyb?file=default.html – Kumaresan Sd Dec 06 '18 at 07:16
Hi, the link is not working anymore. – snibbo Oct 28 '22 at 12:34

score 0 · Answer 4 · answered Dec 01 '21 at 15:05

0

I don't think you're supposed templates like that. Simply create a classic component and if you need a template reference, wrap it in ng-template.

answered Dec 01 '21 at 15:05

knallfrosch

387
6
16

How to load the ng-template in separate file?

4 Answers4

Linked