Como usar * ngIf else?

631

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?

kawli norman
fonte
1
Verifique aqui o Angular 8 explicado com o Exemplo NgIf, NgIf Else e NgIf Then else freakyjolly.com/…
Code Spy

Respostas:

982

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 thensozinho:

<div *ngIf="isValid;then content"></div>    
<ng-template #content>content here...</ng-template>

Demo:

Plunker

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.

Bougarfaoui El houcine
fonte
8
Eu esperava que houvesse uma maneira de usar <ng-template> sem outra tag como div, mas estranhamente não é ... Eu sei que o <div> é removido conforme você o usa, mas é meio estranho como a implementação, eu acho.
andreas 30/03
20
@andreas Você pode usar <ng-container>a cláusula se #
Martin Schneider
2
Nota: você pode usar ng-containerpara o contêiner que contém * ngIf, mas não para o modelo
Simon_Weaver 18/01/18
@ Simon_Weaver Eu descobri da maneira mais difícil. Mas por que? por que eles não permitiram *ngIf trabalhar ng-template?
Eran Medan
<div * ngIf = "isValid; então o conteúdo other_content"> aqui é ignorado </div>, não é ignorado. é o lugar para injetar ng-template #
dimson d
185

No Angular 4.xx, você pode usar o ngIf de quatro maneiras para obter um procedimento simples, caso contrário:

  1. Basta usar se

    <div *ngIf="isValid">
        If isValid is true
    </div>
    
  2. 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>
    
  3. 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>
    
  4. 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.
John Henckel
fonte
Parece que o compilador não aceita ...; else .... Provavelmente o ;deve ser removido.
slartidan
5
em angular-6, I testados com ...; else ...e funcionou
Wasif
20

Para trabalhar com observável, é o que eu costumo fazer para exibir se a matriz observável consiste em dados.

<div *ngIf="(observable$ | async) as listOfObject else emptyList">
   <div >
        ....
    </div>
</div>
 <ng-template #emptyList>
   <div >
        ...
    </div>
</ng-template>
Ah Hiang
fonte
8

"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>
Prashant Shrivastava
fonte
2
Isso não funciona. Se estivesse correto, ainda assim não agregaria nenhum valor, porque a resposta aceita já mostra como fazê-lo.
Günter Zöchbauer
8

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

demonstração ao vivo

Espero que isso ajude ... !!!

DeC
fonte
8

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>
Code Spy
fonte
1
Isso apenas repete o que a resposta aceita já foi declarada
phil294 29/04
6

Sintaxe para ngIf / Else

<div *ngIf=”condition; else elseBlock”>Truthy condition</div>
<ng-template #elseBlock>Falsy condition</ng-template>

insira a descrição da imagem aqui

Usando sintaxe NgIf / Else / Then explícita

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>

insira a descrição da imagem aqui

Observáveis ​​com NgIf e Async Pipe

Para mais detalhes

insira a descrição da imagem aqui

LYES - CHIOUKH
fonte
6

Basta adicionar novas atualizações do Angular 8.

  1. Caso que se com else, podemos usar ngIf e ngIfElse .
<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>
  1. Por exemplo, se com então, podemos usar ngIf e ngIfThen .
<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>
  1. Por exemplo, se com then e else, podemos usar ngIf , ngIfThen e ngIfElse .
<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>
Hoang Tran Son
fonte
Ótimo! Recentemente, mudamos para o angular 8
Islam Murtazaev
5

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! -->

modelo ngif

ngif angular 4

hoogw
fonte
5

ng-template

<ng-template [ngIf]="condition1" [ngIfElse]="template2">
        ...
</ng-template>


<ng-template #template2> 
        ...
</ng-template>
Aniket
fonte
3

Há duas possibilidades de uso se condição na tag ou nos modelos HTML:

  1. * ngIf diretiva do CommonModule, na tag HTML;
  2. se-mais

insira a descrição da imagem aqui

Rzv Razvan
fonte
1
<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>
Amir Touitou
fonte
1

Nas angulares 4, 5 e 6

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:

  1. https://angular.io/api/common/NgIf#syntax
  2. https://angular.io/guide/template-syntax#template-reference-variables--var-
Kalpesh Panchal
fonte
1

Você também pode usar o operador condicional ternário curto Javascript? em angular assim:

{{doThis() ? 'foo' : 'bar'}}

ou

<div [ngClass]="doThis() ? 'foo' : 'bar'">
Sebastian Viereck
fonte
0

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.

user1707141
fonte