ng-component-outlet.html

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

<!-- Скомпилированный шаблон -->
<ng-template [ngComponentOutlet]="ButtonComponent">
  <!-- Неиспользуемый `ng-container` -->
  <ng-container></ng-container>
</ng-template>

<!-- Гораздо лучше, нет неиспользуемого контейнера -->
<ng-template [ngComponentOutlet]="ButtonComponent"></ng-template>
  
<!-- Еще пример -->
<ng-container *ngIf="interval$ | async as counter">
  <p>{{ counter }}</p>
</ng-container>

<!-- Скомпилированный шаблон -->
<ng-template [ngIf]="interval$ | async" let-counter>
  <ng-container>
    <p>{{ counter }}</p>
  </ng-container>
</ng-template>

<!--
  Так намного лучше, нет неиспользуемого `ng-container`
-->
<ng-template [ngIf]="interval$ | async" let-counter>
  <p>{{ counter }}</p>
</ng-template>

<!-- Еще пример -->
<ng-container *ngFor="let item of object | keyvalue">
  <app-product *ngFor="let product of item.value" [product]="product"></app-product>
</ng-container>

<!--
  Скомпилируется в данную структуру, то есть мы получим
  `(object | keyvalue).length` элементов `ng-container`
-->
<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>

<!-- Так намного лучше, не нужен неиспользуемый `ng-container` -->
<ng-template ngFor [ngForOf]="object | keyvalue" let-item>
  <app-product *ngFor="let product of item.value" [product]="product"></app-product>
</ng-template>