*ngIf is used usualy to verify some condition before showing and element in template. In this post we will show you how to use *ngIf with else condition.

we will start with creating a div :

<div *ngIf="condition">Content to render when condition is true.</div>

Now we will add an else block :


<div *ngIf="condition; else elseBlock">Content to render when condition is true.</div>
<ng-template #elseBlock> Content to render when condition is false. </ng-template>

For more organization :

<div *ngIf="condition; then thenBlock else elseBlock"></div>
<ng-template #thenBlock>Content to render when condition is true.</ng-template>
<ng-template #elseBlock>Content to render when condition is false.</ng-template>

if the condition is TRUE we will show #thenBlock else we will show #elseBlock

Source

Tagged: