Sto usando Angular e voglio usare *ngIf else
(disponibile dalla versione 4) in questo esempio:
<div *ngIf="isValid">
content here ...
</div>
<div *ngIf="!isValid">
other content here...
</div>
Come posso ottenere lo stesso comportamento con ngIf else
?
-- lingua-tutto: lang-ts -->
Angolare 4 e 5:
using else
:
<div *ngIf="isValid;else other_content">
content here ...
</div>
<ng-template #other_content>other content here...</ng-template>
puoi anche usare 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>
o then
da solo:
<div *ngIf="isValid;then content"></div>
<ng-template #content>content here...</ng-template>
Demo :
Dettagli:
<ng-template>
: è l'implementazione propria di Angular del tag <template>
che è secondo MDN :
L'elemento HTML <template>
è un meccanismo per contenere, lato client
contenuto che non deve essere reso quando una pagina viene caricata ma può
essere successivamente istanziato durante il runtime usando JavaScript.
"bindEmail" controllerà se l'email è disponibile o meno. se l'email esiste allora Logout mostrerà altrimenti Login mostrerà
<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>
In Angular 4.0 la sintassi if..else
è abbastanza simile agli operatori condizionali in Java.
In Java si usa "condizione?stmnt1:stmnt2"
.
In Angular 4.0 si usa *ngIf="condizione;allora stmnt1 else stmnt2"
.