A micro-template is a fragment of component template content that a structural directive can add to or remove from the HTML document. The asterisk on directives such as *ngIf and *ngFor is shorthand: Angular expands the marked element and its contents into an ng-template used by the directive. Use this syntax when content must be included conditionally or repeated, not merely hidden. section 12.2.1 section 15.0
Include content when a condition holds
<div *ngIf="count() > 4">There are more than 4 products</div> is the compact form of <ng-template ngIf="count() > 4"><div>There are more than 4 products</div></ng-template>. Angular reevaluates the expression as the data changes and adds or removes the div. If the element must remain in the document, control its visibility with a property or style binding instead. section 12.2.1
Repeat a table row
<tr *ngFor="let item of products()"> repeats the row for each product. The expression after of supplies the data; let item names the local variable available to bindings inside that row, such as {{item.name}}. Additional local values include index, count, odd, even, first, and last. section 12.2.3
...
<table class="table table-sm table-bordered text-dark">
<tr><th></th><th>Name</th><th>Category</th><th>Price</th></tr>
<ng-template ngFor let-item [ngForOf]="products()"
let-i="index" let-c="count" let-odd="odd">
<tr class="text-white" [class.bg-primary]="odd"
[class.bg-info]="!odd">
<td>{{ i + 1 }} of {{ c }}</td>
<td>{{item.name}}</td>
<td>{{item.category}}</td>
<td>{{item.price}}</td>
</tr>
</ng-template>
</table>
...
The expanded ngFor form shows the ng-template, its data-source binding, and local variables separately from the row it repeats. section 12.2.3
In a switch, the outer [ngSwitch] element stays in the document and has no asterisk. Its inner *ngSwitchCase and *ngSwitchDefault elements are the micro-templates selected for inclusion. Keep the asterisk on the directives that use a micro-template; omitting it from the compact form can produce a browser-console error. section 12.2.2 section 12.2.3
Custom structural directives can also use micro-templates. Because they change the document by adding and removing content, avoid unnecessary changes when implementing one; repeated DOM changes can harm performance. section 15.0
