问题
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 acheive the same behavior with ngIf else ?
回答1:
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 :
Plunker
Details:
<ng-template>: is Angular’s own implementation of the <template> tag which is according to MDN :
The HTML
<template>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.
回答2:
In Angular 4.x.x You can use ngIf in four way to achieve simple if else procedure:
Just Use If
<div *ngIf="isValid"> If isValid is true </div>Using If with Else (Please notice to templateName)
<div *ngIf="isValid; else templateName"> If isValid is true </div> <ng-template #templateName> If isValid is false </ng-template>Using If with Then (Please notice to templateName)
<div *ngIf="isValid; then templateName"> Here is never showing </div> <ng-template #templateName> If isValid is true </ng-template>Using If with Then and Else
<div *ngIf="isValid; then thenTemplateName else elseTemplateName"> Here is never showing </div> <ng-template #thenTemplateName> If isValid is true </ng-template> <ng-template #elseTemplateName> If isValid is false </ng-template>
Tip: ngIf evaluates the expression and then renders the then or else template in its place when 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.
回答3:
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>
回答4:
"bindEmail" it will check email is available or not. if email is exist than 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>
回答5:
Syntax for ngIf/Else
<div *ngIf=”condition; else elseBlock”>Truthy condition</div>
<ng-template #elseBlock>Falsy condition</ng-template>
Using NgIf / Else/ Then explicit syntax
To add 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>
Observables with NgIf and Async Pipe
For more details
回答6:
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".
回答7:
ngif expression resulting value won’t just be the boolean true or false
if the expression is just a object, it still evaluate it as truthiness.
if the object is undefined, or non-exist, then ngif will evaluate it as falseness.
common use is if an object loaded, exist, 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 ! -->
anthoer example:
<div *ngIf="things.car; let car">
Nice {{ car }}!
</div>
<!-- Nice Honda! -->
ngif template
ngif angular 4
回答8:
ng-template
<ng-template [ngIf]="condition1" [ngIfElse]="template2">
...
</ng-template>
<ng-template #template2>
...
</ng-template>
回答9:
For Angular 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>
回答10:
There are two possibilities to use if condition on HTML tag or templates:
- *ngIf directive from CommonModule, on HTML tag;
- if-else
回答11:
You can Use <ng-container> and <ng-template> for 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
live demo
Hope This will helps ... !!!
回答12:
<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>
回答13:
You can also use Javascript short ternary conditional operator ? in angular like this:
{{doThis() ? 'foo' : 'bar'}}
or
<div [ngClass]="doThis() ? 'foo' : 'bar'">
回答14:
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:
- https://angular.io/api/common/NgIf#syntax
- https://angular.io/guide/template-syntax#template-reference-variables--var-
回答15:
I know this has been a while, but want to add it if it helps. 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.
来源：https://stackoverflow.com/questions/43006550/how-to-use-ngif-else