How to include an ng-template element without a condition in Angular 2

Question

I need an HTML fragment more than once in my Angular template. Instead of writing the HTML code multiple times, I decided to put it inside an ng-template element and use that element replicated in the code.

For example:

<ng-template #myTemplate>
  <h1>Some Header</h1>
  <p>Some text...</p>
</ng-template>

How can I now include this ng-template element somewhere in the template?

I know, that this is possible by using an ngIf statement, like so:

<div *ngIf="false; else myTemplate"></div>

However, this feels like a dirty hack to me. Is there another possibility?

It's not a dirty hack, it's in the Angular documentation: https://angular.io/api/common/NgIf — filipbarak, Feb 21 '18 at 13:31
@filipbarak what he means is, that it feels like a dirty hack to do it with "false; else..." - and that IS a dirty hack. the official answer can be found below. — Patrick Kelleter, Feb 21 '18 at 13:40

score 24 · Accepted Answer · answered Sep 21 '18 at 12:35

  <ng-template #myTemplate>
      <h1>Some Header</h1>
      <p>Some text...</p>
  </ng-template>

  <ng-container *ngTemplateOutlet="myTemplate">
  </ng-container>

We can definitely use 'ng-container' to instantiate the 'myTemplate' template on the page.

We are referring to the 'myTemplate' template via its template reference #myTemplate, and we are using the ngTemplateOutlet structural directive to render the template.

ngTemplateOutlet directive inserts an embedded view from a prepared TemplateRef.

score 1 · Answer 2 · answered Feb 21 '18 at 13:39

1

You are right. Doing it with an ngIf and a hardcoded "false" value is not the right way to go here. What you are looking for is the NgTemplateOutlet directive:

https://angular.io/api/common/NgTemplateOutlet

answered Feb 21 '18 at 13:39

Patrick Kelleter

2,327
1
9
18

How to include an ng-template element without a condition in Angular 2

2 Answers2