J'utilise Angular et je veux utiliser *ngIf else(disponible depuis la version 4) dans cet exemple:

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

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

Comment puis-je obtenir le même comportement avec ngIf else?

Angulaire 4 et 5 :

utilisant else:

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

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

vous pouvez également utiliser 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 thenseul:

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

Démo:

Plunker

Détails:

<ng-template>: est la propre implémentation angulaire de la <template>balise qui est conforme à MDN :

L' <template>élément HTML est un mécanisme permettant de conserver du contenu côté client qui ne doit pas être rendu lorsqu'une page est chargée, mais qui peut ensuite être instancié lors de l'exécution à l'aide de JavaScript.

Dans Angular 4.xx, vous pouvez utiliser ngIf de quatre manières pour réaliser une procédure simple if else:

1. Utilisez simplement If

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

2. Utiliser If avec Else (veuillez noter à templateName )

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

3. Utiliser If avec Then (veuillez noter à templateName )

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

4. Utilisation de If avec Then et 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>
   

Conseil: ngIf évalue l' expression , puis rend le modèle then ou else à sa place lorsque l'expression est respectivement véridique ou fausse. Généralement:

• alors le modèle est le modèle en ligne de ngIf sauf s'il est lié à une valeur différente.
• sinon le modèle est vide sauf s'il est lié.

Pour travailler avec observable, c'est ce que je fais habituellement pour afficher si le tableau observable est constitué de données.

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

"bindEmail" il vérifiera que le courrier électronique est disponible ou non. si un e-mail existe, la déconnexion s'affiche, sinon la connexion s'affiche

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

Vous pouvez utiliser <ng-container>et <ng-template>pour y parvenir

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

Vous pouvez trouver la démo Stackblitz Live ci-dessous

démo en direct

J'espère que cela vous aidera ... !!!

Pour angulaire 9/8

Lien source avec des exemples

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

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

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

3) * ngIf, Then and 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>

Syntaxe pour ngIf / Else

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

Utilisation de la syntaxe explicite NgIf / Else / Then

Pour ajouter ensuite un modèle, il suffit de le lier explicitement à un modèle.

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

Observables avec NgIf et Async Pipe

Pour plus de détails

Ajoutez simplement de nouvelles mises à jour depuis Angular 8.

1. Par exemple, si avec autre, nous pouvons utiliser ngIf et 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. Par exemple, si avec alors, nous pouvons utiliser ngIf et 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. Par exemple, si avec then et else, nous pouvons utiliser ngIf , ngIfThen et 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>

Dans Angular 4.0, la if..elsesyntaxe est assez similaire aux opérateurs conditionnels en Java.

En Java, vous utilisez pour "condition?stmnt1:stmnt2".

Dans Angular 4.0 que vous utilisez *ngIf="condition;then stmnt1 else stmnt2".

expression ngif valeur résultante ne sera pas seulement le booléen vrai ou faux

si l'expression n'est qu'un objet, elle l'évalue toujours comme véracité.

si l'objet n'est pas défini, ou n'existe pas, alors ngif l'évaluera comme faux.

l'usage courant est si un objet est chargé, existe, puis affiche le contenu de cet objet, sinon affiche "loading .......".

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

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

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

un autre exemple:

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

exemple d'anthoer:

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

modèle ngif

ngif angulaire 4

ng-template

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


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

Il y a deux possibilités à utiliser si condition sur une balise HTML ou des modèles:

1. * Directive ngIf de CommonModule, sur la balise HTML;
2. sinon

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

En angulaire 4, 5 et 6

Nous pouvons simplement créer une variable de référence de modèle ^[2] et la lier à la condition else dans une directive * ngIf

Les syntaxes possibles ^[1] sont:

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

Sources:

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

Vous pouvez également utiliser l'opérateur conditionnel ternaire court Javascript? en angulaire comme ceci:

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

ou

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

Je sais que cela fait un moment, mais je veux l'ajouter si cela peut aider. La façon dont j'ai procédé est d'avoir deux drapeaux dans le composant et deux ngIfs pour les deux drapeaux correspondants.

C'était simple et fonctionnait bien avec le matériel car le modèle ng et le matériel ne fonctionnaient pas bien ensemble.