Como usar * ngIf else in Angular?

Estou usando Angular e quero usar *ngIf else (disponível desde a versão 4) neste exemplo:

 
content here ...
other content here...

Como posso conseguir o mesmo comportamento com ngIf else ?

Angular 4 e 5 :

usando else :

 
content here ...
other content here...

você também pode usar then else :

 
here is ignored
content here... other content here...

ou then sozinho:

 
content here...

Demonstração:

Plunker

Detalhes:

: é a própria implementação do Angular da tag que está de acordo com o MDN :

O elemento HTML é um mecanismo para armazenar conteúdo do lado do cliente que não deve ser renderizado quando uma página é carregada, mas pode subsequentemente ser instanciada durante o tempo de execução usando JavaScript.

Em Angular 4.xx Você pode usar ngIf de quatro maneiras para obter um procedimento simples, se outro:

  1. Apenas use se

     
    If isValid is true
  2. Usando If with Else (Por favor note para templateName )

     
    If isValid is true
    If isValid is false
  3. Usando If with Then (Por favor note para templateName )

     
    Here is never showing
    If isValid is true
  4. Usando If with Then and Else

     
    Here is never showing
    If isValid is true If isValid is false

Dica: ngIf avalia a expressão e, em seguida, renderiza o template then ou else em seu lugar quando a expressão é verdadeira ou falsamente, respectivamente. Tipicamente o:

  • então template é o template inline de ngIf a menos que seja ligado a um valor diferente.
  • outro modelo está em branco, a menos que esteja vinculado.

Para trabalhar com observável, é o que geralmente faço para exibir se o array observável consiste em dados.

 
....
...

“bindEmail” verificará se o email está disponível ou não. se houver e-mail, então o Logout será exibido. Caso contrário, o login será exibido

 
  • Logout
  • Login
  • Na syntax Angular 4.0 if..else é 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 booleano verdadeiro ou falso

    se a expressão é apenas um object, ainda a avalia como verdade.

    se o object for indefinido ou não existir, então ngif o avaliará como falsidade.

    uso comum é se existir um object carregado, então exibir o conteúdo deste object, caso contrário, exibir “carregando …….”.

      
    Still loading...........
    object.info, object.id, object.name ... etc.

    outro exemplo:

      things = { car: 'Honda', shoes: 'Nike', shirt: 'Tom Ford', watch: 'Timex' }; 
    Nice car!
    Call a Uber.

    exemplo de anthoer:

     
    Nice {{ car }}!

    modelo ngif

    ngif angular 4

     
    Connected Disconnected

    Em Angular 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

    Os possíveis syntaxs [1] são:

      
    ...
    ...
    ...
    ...
    ... ...
    {{value}}
    ...

    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-