web-dev-qa-db-fra.com

Comment utiliser * ngIf sinon?

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?

angularif-statementangular-template
417
kawli norman

Angulaires 4 et 5:

en 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 then seul:

<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 par Angular de la balise <template> qui correspond à MDN : 

L'élément HTML <template> est un mécanisme permettant de contenir le client contenu qui ne doit pas être rendu quand une page est chargée mais peut être ensuite instancié pendant l'exécution à l'aide de JavaScript.

728
Bougarfaoui El houcine

In Angular 4.x.x Vous pouvez utiliser ngIf de quatre manières différentes pour réaliser une procédure simple si-autrement

  1. Il suffit d'utiliser If

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

  2. Utiliser If avec Else (Veuillez noter que 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 que templateName)

    <div *ngIf="isValid; then templateName">
    Here is never showing
</div>

<ng-template #templateName>
    If isValid is true
</ng-template>

  4. Utiliser 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>

Astuce: ngIf évalue expression puis rend le puis ou else modèle à sa place lorsque l'expression est respectivement vérité et fausseté . Typiquement le:

  • then modèle est le modèle en ligne de ngIf, sauf s'il est lié à une valeur différente.
  • Le modèle else est vide sauf s'il est lié.
126
user2577907

Pour travailler avec observable, voici 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>
12
Ah Hiang

"bindEmail" il vérifiera si l'email est disponible ou non. si l'email existe, alors Logout montrera sinon l'identifiant montrera

<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>
6
Prashant Shrivastava

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

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

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

4
Amit Gaikwad

la valeur résultante de l'expression ngif ne sera pas simplement le booléen vrai ou faux

si l'expression n'est qu'un objet, elle l'évalue quand même comme une vérité.

si l'objet est indéfini ou inexistant, alors ngif l'évaluera en tant que fausseté.

utilisation courante est si un objet chargé, existe, puis affiche le contenu de cet objet, sinon affiche "chargement ......." 

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

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

modèle ngif

ngif angular 4

4
hoogw

Syntaxe pour ngIf/Else

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

 enter image description here

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>

 enter image description here

Observables avec NgIf et Pipe Async

Pour plus de détails

 enter image description here

2
Lyes CHIOUKH

Pour Angular 8

Source Lien avec 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 Else 

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

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

3) * ngIf, Then et 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>
2
Code Spy

En angulaire 4, 5 et 6

Nous pouvons simplement créer un variable de référence du modèle [2] et lier cela à la condition else à l'intérieur d'une directive * ngIf

Les possibles Syntaxes [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-
1
Kalpesh Panchal

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

  1. * directive ngIf de CommonModule, sur une balise HTML; 
  2. sinon

 enter image description here

1
Rzv Razvan

ng-template

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


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

Vous pouvez également utiliser Javascript conditionnel ternaire court? dans angular comme ceci:

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

ou

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

Je sais que cela fait longtemps, mais je veux l’ajouter si cela peut aider. La façon dont je me suis débrouillé 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 et le matériel ne fonctionnaient pas bien ensemble. 

0
user1707141
<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>
0
Amir Twito