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>