This content originally appeared on DEV Community and was authored by Rajesh Kumar Yadav
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.
This content originally appeared on DEV Community and was authored by Rajesh Kumar Yadav
Rajesh Kumar Yadav | Sciencx (2021-05-14T04:10:36+00:00) Angular : How to use *ngIf else? [Including NgIf, ngIfThen and ngIfElse with Live Demo]. Retrieved from https://www.scien.cx/2021/05/14/angular-how-to-use-ngif-else-including-ngif-ngifthen-and-ngifelse-with-live-demo/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.