An ng-template element holds content for a directive to insert into the document. It does not become an HTML element itself. Use it when content must appear in several places or when a structural directive controls whether content appears. section 12.2.4 section 15.2
Listing 12.14. Replacing the contents of the template.html file in the src/app folder
<ng-template #titleTemplate>
<h4 class="p-2 bg-success text-white">Repeated Content</h4>
</ng-template>
<ng-template [ngTemplateOutlet]="titleTemplate"></ng-template>
<div class="bg-info p-2 m-2 text-white">
There are {{count()}} products.
</div>
<ng-template [ngTemplateOutlet]="titleTemplate"></ng-template>
The named template holds a heading. Two ngTemplateOutlet bindings insert that heading on either side of a product count; neither the definition nor the outlet hosts appear as HTML elements. section 12.2.4
To give each insertion different data, declare a let- variable on the content template and bind ngTemplateOutletContext at each outlet. The context object's property supplies the value used by the template's binding. section 12.2.4
Listing 12.15. Providing context data in the template.html file in the src/app folder
<ng-template #titleTemplate let-text="title">
<h4 class="p-2 bg-success text-white">{{text}}</h4>
</ng-template>
<ng-template [ngTemplateOutlet]="titleTemplate"
[ngTemplateOutletContext]="{title: 'Header'}">
</ng-template>
<div class="bg-info p-2 m-2 text-white">
There are {{count()}} products.
</div>
<ng-template [ngTemplateOutlet]="titleTemplate"
[ngTemplateOutletContext]="{title: 'Footer'}">
</ng-template>
The template's let-text="title" receives the title property from each outlet's context object, producing separate Header and Footer headings from one definition. section 12.2.4
Show a table conditionally
Place a product table inside an ng-template bound with [paIf]="showTable". Bind a checkbox to the same component property. The structural directive's intended behavior is to insert the table when the checkbox makes showTable true and remove it when false. This is the full template syntax; a shorter structural-directive syntax is also available. section 15.2
The element also sits behind the shorter *ngFor syntax. Angular expands that syntax into an ng-template containing the repeated row. In its expanded form, let- attributes expose values such as the current item and index to bindings inside the template. section 12.2.3
