DEV Community

Cover image for Angular : How to use *ngIf else? [Including NgIf, ngIfThen and ngIfElse with Live Demo]
RajeshKumarYadav.com
RajeshKumarYadav.com

Posted on • Updated on

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>
Enter fullscreen mode Exit fullscreen mode

Simple form with expanded syntax:

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

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Buy Me A Coffee

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.

Top comments (4)

Collapse
 
rohithv07 profile image
Rohith V

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

Collapse
 
rajeshkumaryadavdotcom profile image
RajeshKumarYadav.com

Thank you, I’ll try my best!

Collapse
 
polyterative profile image
Vladyslav Yakovenko

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

Collapse
 
rajeshkumaryadavdotcom profile image
RajeshKumarYadav.com

Thanks