How can I use "*ngIf else"?
I'm using Angular and I want to use *ngIf else (available since version 4) in this example:
<div *ngIf="isValid">
content here ...
</div>
<div *ngIf="!isValid">
other content here...
</div>
How can I achieve the same behavior with ngIf else?
Angular 4 and 5:
Using else:
<div *ngIf="isValid;else other_content">
content here ...
</div>
<ng-template #other_content>other content here...</ng-template>
You can also use then else:
<div *ngIf="isValid;then content else other_content">here is ignored</div>
<ng-template #content>content here...</ng-template>
<ng-template #other_content>other content here...</ng-template>
Or then alone:
<div *ngIf="isValid;then content"></div>
<ng-template #content>content here...</ng-template>
Demo:
Details:
<ng-template>: is Angular’s own implementation of the <template> tag which is according to MDN:
The HTML element is a mechanism for holding client-side content that is not to be rendered when a page is loaded but may subsequently be instantiated during runtime using JavaScript.
In Angular 4.x.x
You can use ngIf in four ways to achieve a simple if-else procedure:
Just use If
Tip: ngIf evaluates the expression and then renders the then or else template in its place when the expression is truthy or falsy respectively. Typically the: then template is the inline template of ngIf unless bound to a different value. else template is blank unless it is bound.
...; else .... Probably the ; should be removed.
...; else ... and it worked
For Angular 9/8
Source Link with Examples
export class AppComponent {
isDone = true;
}
1) *ngIf
<div *ngIf="isDone">
It's Done!
</div>
<!-- Negation operator-->
<div *ngIf="!isDone">
It's Not Done!
</div>
2) *ngIf and Else
<ng-container *ngIf="isDone; else elseNotDone">
It's Done!
</ng-container>
<ng-template #elseNotDone>
It's Not Done!
</ng-template>
3) *ngIf, Then and Else
<ng-container *ngIf="isDone; then iAmDone; else iAmNotDone">
</ng-container>
<ng-template #iAmDone>
It's Done!
</ng-template>
<ng-template #iAmNotDone>
It's Not Done!
</ng-template>
To work with observable, this is what I usually do to display if the observable array consists of data.
<div *ngIf="(observable$ | async) as listOfObject else emptyList">
<div >
....
</div>
</div>
<ng-template #emptyList>
<div >
...
</div>
</ng-template>
Just add new updates from Angular 8.
For case if with else, we can use ngIf and ngIfElse.
If isShow is true then the first line execute, otherwise secondline executes, because elseBlockShow is working as a reference variable.
<div *ngIf="isShow; else elseBlockShow">
Text to show for If
</div>
<ng-template #elseBlockShow>
Text to show for else block
</ng-template>
Here's some nice and clean syntax on Angular's NgIf and using the else statement. In short, you will declare an ElementRef on an element and then reference it in the else block:
<div *ngIf="isLoggedIn; else loggedOut">
Welcome back, friend.
</div>
<ng-template #loggedOut>
Please friend, login.
</ng-template>
I've taken this example from NgIf, Else, Then which I found to be really well explained.
It also demonstrates using the <ng-template> syntax:
<ng-template [ngIf]="isLoggedIn" [ngIfElse]="loggedOut">
<div>
Welcome back, friend.
</div>
</ng-template>
<ng-template #loggedOut>
<div>
Please friend, login.
</div>
</ng-template>
And also using <ng-container> if that's what you're after:
<ng-container
*ngIf="isLoggedIn; then loggedIn; else loggedOut">
</ng-container>
<ng-template #loggedIn>
<div>
Welcome back, friend.
</div>
</ng-template>
<ng-template #loggedOut>
<div>
Please friend, login.
</div>
</ng-template>
Source is taken from here on Angular's NgIf and Else syntax.
You can use <ng-container> and <ng-template> to achieve this:
<ng-container *ngIf="isValid; then template1 else template2"></ng-container>
<ng-template #template1>
<div>Template 1 contains</div>
</ng-template>
<ng-template #template2>
<div>Template 2 contains </div>
</ng-template>
You can find the StackBlitz Live demo below:
"bindEmail" will check if email is available or not. If email does exist then Logout will show. Otherwise Login will show.
<li *ngIf="bindEmail;then logout else login"></li>
<ng-template #logout><li><a routerLink="/logout">Logout</a></li></ng-template>
<ng-template #login><li><a routerLink="/login">Login</a></li></ng-template>
An ngif expression resulting value won’t just be the Boolean true or false.
If the expression is just an object, it still evaluates it as truthiness.
If the object is undefined, or non-existent, then ngif will evaluate it as falseness.
Common use is if an object loaded, exist, and then display the content of this object, otherwise display "loading.......".
<div *ngIf="!object">
Still loading...........
</div>
<div *ngIf="object">
<!-- the content of this object -->
object.info, object.id, object.name ... etc.
</div>
Another example:
things = {
car: 'Honda',
shoes: 'Nike',
shirt: 'Tom Ford',
watch: 'Timex'
};
<div *ngIf="things.car; else noCar">
Nice car!
</div>
<ng-template #noCar>
Call a Uber.
</ng-template>
<!-- Nice car ! -->
Another example:
<div *ngIf="things.car; let car">
Nice {{ car }}!
</div>
<!-- Nice Honda! -->
There are two possibilities to use an if condition on an HTML tag or templates:
*ngIf directive from CommonModule, on HTML tag; if-else
https://i.stack.imgur.com/IQIbb.png
ng-template
<ng-template [ngIf]="condition1" [ngIfElse]="template2">
...
</ng-template>
<ng-template #template2>
...
</ng-template>
Syntax for ngIf/Else
<div *ngIf=”condition; else elseBlock”>Truthy condition</div>
<ng-template #elseBlock>Falsy condition</ng-template>
https://i.stack.imgur.com/GNGHv.png
Using NgIf / Else/ Then explicit syntax
To add a then template, we just have to bind it to a template explicitly.
<div *ngIf=”condition; then thenBlock else elseBlock”> ... </div>
<ng-template #thenBlock>Then template</ng-template>
<ng-template #elseBlock>Else template</ng-template>
https://i.stack.imgur.com/fzLsc.png
Observables with NgIf and Async Pipe
https://i.stack.imgur.com/8gODX.png
You can also use the JavaScript short ternary conditional operator ? in Angular like this:
{{doThis() ? 'foo' : 'bar'}}
or
<div [ngClass]="doThis() ? 'foo' : 'bar'">
In Angular 4.0 if..else syntax is quite similar to conditional operators in Java.
In Java you use to "condition?stmnt1:stmnt2".
In Angular 4.0 you use *ngIf="condition;then stmnt1 else stmnt2".
<div *ngIf="show; else elseBlock">Text to show</div>
<ng-template #elseBlock>Alternate text while primary text is hidden</ng-template>
<div *ngIf="this.model.SerialNumber != '';then ConnectedContent else DisconnectedContent" class="data-font"> </div>
<ng-template #ConnectedContent class="data-font">Connected</ng-template>
<ng-template #DisconnectedContent class="data-font">Disconnected</ng-template>
In Angular 4, 5 and 6
We can simply create a template reference variable 2 and link that to the else condition inside an *ngIf directive
The possible syntaxes 1 are:
<!-- Only If condition -->
<div *ngIf="condition">...</div>
<!-- or -->
<ng-template [ngIf]="condition"><div>...</div></ng-template>
<!-- If and else conditions -->
<div *ngIf="condition; else elseBlock">...</div>
<!-- or -->
<ng-template #elseBlock>...</ng-template>
<!-- If-then-else -->
<div *ngIf="condition; then thenBlock else elseBlock"></div>
<ng-template #thenBlock>...</ng-template>
<ng-template #elseBlock>...</ng-template>
<!-- If and else conditions (storing condition value locally) -->
<div *ngIf="condition as value; else elseBlock">{{value}}</div>
<ng-template #elseBlock>...</ng-template>
DEMO: https://stackblitz.com/edit/angular-feumnt?embed=1&file=src/app/app.component.html
Sources:
NgIf - directive Template syntax
**ngIf else**
The way I went about with is to have two flags in the component and two ngIfs for the corresponding two flags.
It was simple and worked well with material as ng-template and material were not working well together.
Follow WeChat
Success story sharing
Want to stay one step ahead of the latest teleworks?
Subscribe Now相似问题
- *ngIf and *ngFor on same element causing error
- access key and value of object using *ngFor
- angular 2 ngIf and CSS transition/animation
- BehaviorSubject vs Observable?
- *ngIf else if in template
- Error: More than one module matches. Use skip-import option to skip importing the component into the closest module
HuntsBot,a one-stop outsourcing task, remote job, product ideas sharing and subscription platform, which supports DingTalk, Lark, WeCom, Email and Telegram robot subscription. The platform will push outsourcing task requirements, remote work opportunities, product ideas to every subscribed user with timely, stable and reliable.
<ng-container>for the if-clauseng-containerfor the container containing *ngIf, but not for the template*ngIfto work onng-template?