ng-template-examples.html

<ng-container *ngComponentOutlet="ButtonComponent"></ng-container>

<!-- Compiled template -->
<ng-template [ngComponentOutlet]="ButtonComponent">
  <!-- Unused `ng-container` -->
  <ng-container></ng-container>
</ng-template>

<!-- Much better, no unused `ng-container` -->
<ng-template [ngComponentOutlet]="ButtonComponent"></ng-template>
  
<!-- Another example -->
<ng-container *ngIf="interval$ | async as counter">
  <p>{{ counter }}</p>
</ng-container>

<!-- Compiled template -->
<ng-template [ngIf]="interval$ | async" let-counter>
  <ng-container>
    <p>{{ counter }}</p>
  </ng-container>
</ng-template>

<!-- Much better, no unused `ng-container` -->
<ng-template [ngIf]="interval$ | async" let-counter>
  <p>{{ counter }}</p>
</ng-template>

<!-- Another example -->
<ng-container *ngFor="let item of object | keyvalue">
  <app-product *ngFor="let product of item.value" [product]="product"></app-product>
</ng-container>

<!--
  Compiled template, so we've got
  `(object | keyvalue).length` `ng-container` elements
-->
<ng-template ngFor [ngForOf]="object | keyvalue" let-item>
  <ng-container>
    <ng-template ngFor [ngForOf]="item.value" let-product>
      <app-product [product]="product"></app-product>
    </ng-template>
  </ng-container>
</ng-template>

<!-- Much better, no unused `ng-container` -->
<ng-template ngFor [ngForOf]="object | keyvalue" let-item>
  <app-product *ngFor="let product of item.value" [product]="product"></app-product>
</ng-template>