Angular ng-template Conditional Content Display

Image by Ronny Overhate from Pixabay

Scenario

We have a sayHello:boolean = trueproperty on our AppComponent . When it is set to true Hello should render.

When it is false Goodbye should render.

Approach

<div *ngIf="sayHello else goodbye">
    Hello
</div>
<ng-template #goodbye>
    Goodbye
</ng-template>

Demo