The ng-template with ngIf directive

Note

<ng-template> in Angular is a angular element used to define and render content dynamically within components. It's a versatile tool for creating reusable templates, handling rendering logic, and improving code organization by separating content from its presentation, commonly used with structural directives like *ngIf, *ngFor, and *ngSwitch.

<div *ngIf="items else loading">
  ... 
</div>

<ng-template #loading>
    <div>Loading...</div>
</ng-template>

or

<ng-template [ngIf]="items" [ngIfElse]="loading">
   <div class="lessons-list">
     ... 
   </div>
</ng-template>

<ng-template #loading>
    <div>Loading...</div>
</ng-template>