Some of Our Sources
- BoingBoing
- Engadget
- Crazy Leaf Design
- My Ink Blog
- Specky Boy
- Freelance Switch
- Design Modo
- Willems Lab
- Daily Now
- Dev To
Help Webnuz
Referal links:
May 14, 2021 04:10 am GMT
Original Link: https://dev.to/rajeshkumaryadavdotcom/angular-how-to-use-ngif-else-5gcp
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 istrue.</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.
Original Link: https://dev.to/rajeshkumaryadavdotcom/angular-how-to-use-ngif-else-5gcp
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To