Angular : How to use *ngIf else? [Including NgIf, ngIfThen and ngIfElse with Live Demo]

Simple form with shorthand syntax:

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

Simple form with expanded syntax:

<ng-template [ngIf]="condition"><div>Content to render when condition is
true.</div></ng-template>

Form with 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>

Shorthand form with "then" and "else" blocks:

<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>

Form with storing the value locally:

<div *ngIf="condition as value; else elseBlock">{{value}}</div>
<ng-template #elseBlock>Content to render when value is null.</ng-template>

For case if with else, we can use ngIf and ngIfElse:

<ng-template [ngIf]="condition" [ngIfElse]="elseBlock">
  Content to render when condition is true.
</ng-template>
<ng-template #elseBlock>
  Content to render when condition is false.
</ng-template>

For case if with then, we can use ngIf and ngIfThen:

<ng-template [ngIf]="condition" [ngIfThen]="thenBlock">
  This content is never showing
</ng-template>
<ng-template #thenBlock>
  Content to render when condition is true.
</ng-template>

For case if with then and else, we can use ngIf, ngIfThen, and ngIfElse:

<ng-template [ngIf]="condition" [ngIfThen]="thenBlock" [ngIfElse]="elseBlock">
  This content is never showing
</ng-template>
<ng-template #thenBlock>
  Content to render when condition is true.
</ng-template>
<ng-template #elseBlock>
  Content to render when condition is false.
</ng-template>

With all that being said, I highly recommend you keep learning!

Thank you for reading this article. Please feel free to connect with me on LinkedIn and Twitter.

Comments

[Rohith V]

Great, Continue with other topics from angular.. :)

[Rajesh Kumar Yadav]

Thank you, I’ll try my best!

[Vladyslav Yakovenko]

Form with storing the value locally
Didn't know about that. May come in useful often. Thx

[Rajesh Kumar Yadav]

Thanks