Estoy usando Angular y quiero usar *ngIf else
(disponible desde la versión 4) en este ejemplo:
<div *ngIf="isValid">
content here ...
</div>
<div *ngIf="!isValid">
other content here...
</div>
¿Cómo puedo conseguir el mismo comportamiento con ngIf else
?
idioma-todo: lang-ts -->
Angular 4 y 5:
usando else
:
<div *ngIf="isValid;else other_content">
content here ...
</div>
<ng-template #other_content>other content here...</ng-template>
también se puede utilizar 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 "entonces" solo:
<div *ngIf="isValid;then content"></div>
<ng-template #content>content here...</ng-template>
Demo :
[Plunker][1]
Detalles:
<ng-template>
: es la implementación propia de Angular de la etiqueta <template>
que está de acuerdo con [MDN][2] :
El elemento HTML <template>
es un mecanismo para mantener el contenido del lado del cliente
contenido que no se va a renderizar cuando se carga una página pero que puede posteriormente ser instanciado durante el tiempo de ejecución usando JavaScript.
Si el correo electrónico existe, se mostrará el cierre de sesión, de lo contrario, se mostrará el inicio de sesión.
<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>
En Angular 4.0 la sintaxis if..else
es bastante similar a los operadores condicionales en Java.
En Java se utiliza "condition?stmnt1:stmnt2"
.
En Angular 4.0 se utiliza *ngIf="condition;then stmnt1 else stmnt2"
.