Angular - ng-template basic

What is ng-template?

ng-template creates templates that are not displayed by default.
It is displayed only when specified when used with a control structure such as if.

1
2
3
4
5
6
7
8
9
10
// app.component.html - ver.1

<ng-container
    *ngIf="hoe; else bar">
    This will be shown if <b>true</b>
</ng-container>

<ng-template #bar>
    #bar - This will be shown if <b>false</b>
</ng-template>
1
2
3
4
5
6
7
8
9
10
11
12
13
// app.component.html - ver.2

<ng-container
    *ngIf="hoe; then foo; else bar">
</ng-container>

<ng-template #foo>
    #foo - This will be shown if <b>true</b>
</ng-template>

<ng-template #bar>
    #bar - This will be shown if <b>false</b>
</ng-template>

Demo

ng-template