The ng-template with ngIf directive
<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>