Sto usando Angular e voglio usare *ngIf else(disponibile dalla versione 4) in questo esempio:

<div *ngIf="isValid">
  content here ...
</div>

<div *ngIf="!isValid">
 other content here...
</div>

Come posso ottenere lo stesso comportamento con ngIf else?

Angolari 4 e 5 :

utilizzando else:

<div *ngIf="isValid;else other_content">
    content here ...
</div>

<ng-template #other_content>other content here...</ng-template>

puoi anche usare 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 thenda solo:

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

Demo:

Plunker

Dettagli:

<ng-template>: è l'implementazione di Angular del <template>tag secondo MDN :

L' <template>elemento HTML è un meccanismo per contenere il contenuto sul lato client che non deve essere visualizzato quando viene caricata una pagina ma che può essere successivamente istanziato durante il runtime utilizzando JavaScript.

In Angular 4.xx È possibile utilizzare ngIf in quattro modi per ottenere una semplice procedura if else:

1. Usa solo If

   <div *ngIf="isValid">
       If isValid is true
   </div>
   

2. Utilizzo di If with Else (Nota su templateName )

   <div *ngIf="isValid; else templateName">
       If isValid is true
   </div>
   
   <ng-template #templateName>
       If isValid is false
   </ng-template>
   

3. Utilizzo di If con Then (Nota su templateName )

   <div *ngIf="isValid; then templateName">
       Here is never showing
   </div>
   
   <ng-template #templateName>
       If isValid is true
   </ng-template>
   

4. Usando If con Then ed 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>
   

Suggerimento: ngSe valuta l' espressione e quindi esegue il rendering del modello then o else al suo posto quando rispettivamente espressione è verità o falsa. In genere il:

• allora template è il modello inline di ngIf a meno che non sia associato a un valore diverso.
• il modello else è vuoto a meno che non sia associato.

Per lavorare con osservabile, questo è ciò che di solito faccio per visualizzare se l'array osservabile è costituito da dati.

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

"bindEmail" controllerà che l'email sia disponibile o meno. se esiste un'e-mail che Logout mostrerà altrimenti Accesso mostrerà

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

È possibile utilizzare <ng-container>e <ng-template>per ottenere questo

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

Di seguito puoi trovare la demo di Stackblitz Live

dimostrazione dal vivo

Spero che questa volontà aiuti ... !!!

Per angolare 9/8

Link alla fonte con esempi

    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 altro

    <ng-container *ngIf="isDone; else elseNotDone">
      It's Done!
    </ng-container>

    <ng-template #elseNotDone>
      It's Not Done!
    </ng-template>

3) * ngIf, Then ed Else

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

Sintassi per ngIf / Else

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

Utilizzo della sintassi esplicita NgIf / Else / Then

Per aggiungere un modello, dobbiamo solo collegarlo esplicitamente a un modello.

<div *ngIf=”condition; then thenBlock else elseBlock”> ... </div> 
<ng-template #thenBlock>Then template</ng-template>
<ng-template #elseBlock>Else template</ng-template>

Osservabili con NgIf e Async Pipe

Per ulteriori dettagli

Aggiungi nuovi aggiornamenti da Angular 8.

1. Ad esempio, se con else, possiamo usare 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>

2. Per esempio se con allora, possiamo usare 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>

3. Ad esempio, se con then e else, possiamo usare 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>

In Angular 4.0 la if..elsesintassi è abbastanza simile agli operatori condizionali in Java.

In Java che usi "condition?stmnt1:stmnt2".

In Angular 4.0 che usi *ngIf="condition;then stmnt1 else stmnt2".

Il valore risultante dell'espressione ngif non sarà solo il vero o falso booleano

se l'espressione è solo un oggetto, lo valuta comunque come verità.

se l'oggetto è indefinito o inesistente, allora ngif lo valuterà come falsità.

l'uso comune è se esiste un oggetto caricato, quindi visualizza il contenuto di questo oggetto, altrimenti visualizza "caricamento in corso .......".

 <div *ngIf="!object">
     Still loading...........
 </div>

<div *ngIf="object">
     <!-- the content of this object -->

           object.info, object.id, object.name ... etc.
 </div>

un altro esempio:

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

esempio di anthoer:

<div *ngIf="things.car; let car">
   Nice {{ car }}!
 </div>
<!-- Nice Honda! -->

modello ngif

ngif angolare 4

ng-template

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


<ng-template #template2> 
        ...
</ng-template>

Esistono due possibilità da utilizzare se la condizione sul tag o sui modelli HTML:

1. * ngSe direttiva da CommonModule, su tag HTML;
2. se altro

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

In angolare 4, 5 e 6

Possiamo semplicemente creare una variabile di riferimento del modello ^[2] e collegarla alla condizione else all'interno di una direttiva * ngIf

Le possibili sintassi ^[1] sono:

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

fonti:

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

È inoltre possibile utilizzare l'operatore condizionale ternario breve Javascript? in angolare in questo modo:

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

o

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

So che è passato un po 'di tempo, ma voglio aggiungerlo se aiuta. Il modo in cui sono andato avanti è avere due flag nel componente e due ngIfs per i due flag corrispondenti.

Era semplice e funzionava bene con il materiale poiché ng-template e il materiale non funzionavano bene insieme.