Estou usando Angular e quero usar *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 obter o mesmo comportamento ngIf else
?
Estou usando Angular e quero usar *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 obter o mesmo comportamento ngIf else
?
Respostas:
Angular 4 e 5 :
usando else
:
<div *ngIf="isValid;else other_content">
content here ...
</div>
<ng-template #other_content>other content here...</ng-template>
você também pode usar 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>
ou then
sozinho:
<div *ngIf="isValid;then content"></div>
<ng-template #content>content here...</ng-template>
Demo:
Detalhes:
<ng-template>
: é a implementação da <template>
tag pela Angular, de acordo com o MDN :
O
<template>
elemento HTML é um mecanismo para manter o conteúdo do cliente que não deve ser renderizado quando uma página é carregada, mas pode ser instanciado posteriormente durante o tempo de execução usando JavaScript.
<ng-container>
a cláusula se #
ng-container
para o contêiner que contém * ngIf, mas não para o modelo
*ngIf
trabalhar ng-template
?
No Angular 4.xx, você pode usar o ngIf de quatro maneiras para obter um procedimento simples, caso contrário:
Basta usar se
<div *ngIf="isValid">
If isValid is true
</div>
Usando If with Else (observe o templateName )
<div *ngIf="isValid; else templateName">
If isValid is true
</div>
<ng-template #templateName>
If isValid is false
</ng-template>
Usando If with Then (observe para templateName )
<div *ngIf="isValid; then templateName">
Here is never showing
</div>
<ng-template #templateName>
If isValid is true
</ng-template>
Usando If com Then e 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>
Dica: ngIf avalia a expressão e renderiza o modelo then or else em seu lugar quando a expressão é verdadeira ou falsa, respectivamente. Normalmente o:
- então template é o modelo embutido de ngIf, a menos que esteja vinculado a um valor diferente.
- caso contrário, o modelo estará em branco, a menos que esteja vinculado.
...; else ...
. Provavelmente o ;
deve ser removido.
...; else ...
e funcionou
"bindEmail" verificará se o email está disponível ou não. se existir um e-mail, o Logout será exibido, caso contrário, o Login será exibido
<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>
Você pode usar <ng-container>
e <ng-template>
para conseguir isso
<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>
Você pode encontrar a demonstração do Stackblitz Live abaixo
Espero que isso ajude ... !!!
Para Angular 9/8
Link de origem com exemplos
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 e Else
<ng-container *ngIf="isDone; else elseNotDone">
It's Done!
</ng-container>
<ng-template #elseNotDone>
It's Not Done!
</ng-template>
3) * ngIf, Then e mais
<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>
<div *ngIf=”condition; else elseBlock”>Truthy condition</div>
<ng-template #elseBlock>Falsy condition</ng-template>
Para adicionar um modelo, basta vinculá-lo explicitamente a um modelo.
<div *ngIf=”condition; then thenBlock else elseBlock”> ... </div>
<ng-template #thenBlock>Then template</ng-template>
<ng-template #elseBlock>Else template</ng-template>
Basta adicionar novas atualizações do Angular 8.
<ng-template [ngIf]="condition" [ngIfElse]="elseBlock">
Content to render when condition is true.
</ng-template>
<ng-template #elseBlock>
Content to render when condition is false.
</ng-template>
<ng-template [ngIf]="condition" [ngIfThen]="thenBlock">
This content is never showing
</ng-template>
<ng-template #thenBlock>
Content to render when condition is true.
</ng-template>
<ng-template [ngIf]="condition" [ngIfThen]="thenBlock" [ngIfElse]="elseBlock">
This content is never showing
</ng-template>
<ng-template #thenBlock>
Content to render when condition is true.
</ng-template>
<ng-template #elseBlock>
Content to render when condition is false.
</ng-template>
No Angular 4.0, a if..else
sintaxe é bastante semelhante aos operadores condicionais em Java.
Em Java você usa "condition?stmnt1:stmnt2"
.
No Angular 4.0 você usa *ngIf="condition;then stmnt1 else stmnt2"
.
valor resultante da expressão ngif não será apenas o verdadeiro ou falso booleano
se a expressão é apenas um objeto, ainda a avalia como veracidade.
se o objeto for indefinido ou inexistente, o ngif o avaliará como falsidade.
o uso comum é se um objeto carregado existir, exibir o conteúdo desse objeto, caso contrário, exibir "loading .......".
<div *ngIf="!object">
Still loading...........
</div>
<div *ngIf="object">
<!-- the content of this object -->
object.info, object.id, object.name ... etc.
</div>
outro exemplo:
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 ! -->
exemplo anthoer:
<div *ngIf="things.car; let car">
Nice {{ car }}!
</div>
<!-- Nice Honda! -->
Há duas possibilidades de uso se condição na tag ou nos modelos HTML:
<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>
Podemos simplesmente criar uma variável de referência de modelo [2] e vinculá-la à condição else dentro de uma diretiva * ngIf
As possíveis sintaxes [1] são:
<!-- 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
Fontes:
Você também pode usar o operador condicional ternário curto Javascript? em angular assim:
{{doThis() ? 'foo' : 'bar'}}
ou
<div [ngClass]="doThis() ? 'foo' : 'bar'">
Sei que já faz um tempo, mas quero adicioná-lo, se ajudar. A maneira como eu trabalhei é ter dois sinalizadores no componente e dois ngIfs para os dois sinalizadores correspondentes.
Era simples e funcionava bem com o material, pois o ng-template e o material não estavam funcionando bem juntos.