DEV Community

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

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

RajeshKumarYadav.com
I am Rajesh, a Technology Specialist by profession and a Technical Blogger by passion. I am passionate about knowledge sharing, open-source contributions, connecting to people, and mentoring.
Updated on ・2 min read

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.

Discussion (4)

Collapse
rohithv07 profile image
Rohith V

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

Collapse
rajeshkumaryadavdotcom profile image
RajeshKumarYadav.com Author

Thank you, I’ll try my best!

Collapse
polyterative profile image
Vlady

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

Collapse
rajeshkumaryadavdotcom profile image
RajeshKumarYadav.com Author

Thanks