I'm utilizando Angular e eu quero utilizar *ngIf else
(disponível desde a versão 4) neste exemplo:
<div *ngIf="isValid">
content here ...
</div>
<div *ngIf="!isValid">
other content here...
</div>
Como posso ter o mesmo comportamento com "se não fosse assim"?
**Angular 4 e 5***:
utilizando else
:
<div *ngIf="isValid;else other_content">
content here ...
</div>
<ng-template #other_content>other content here...</ng-template>
você também pode utilizar o então
:
<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>
ou então
só:
<div *ngIf="isValid;then content"></div>
<ng-template #content>content here...</ng-template>
Demo :
[Plunker][1]
Detalhes:
<ng-template>
: é a própria implementação da tag <template>
da Angular, que está de acordo com [MDN][2] :
O elemento HTML
<template>
é um mecanismo para manter o lado do cliente conteúdo que não deve ser apresentado quando uma página é carregada, mas que pode subsequentemente ser instanciado durante o tempo de execução usando JavaScript.
"bindEmail" verificará se o e-mail está disponível ou não. se o e-mail existe, o Logout mostrará caso contrário, o Login mostrará
<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>
No Angular 4.0 if..else
a sintaxe é bastante similar à dos operadores condicionais em Java.
Em Java você utiliza para "condition?stmnt1:stmnt2"
.
No Angular 4.0 você utiliza *ngIf="condition;depois stmnt1 else stmnt2"
.