Contenu à afficher lorsque la condition est vraie. 

Enfin, vous pouvez ajouter un résultat lorsque vos conditions ne sont pas remplies. C'est là que la clause else entre dans une instruction if. L'idée est que votre logique devrait être construite comme ceci: si la condition est remplie, faites-le, sinon faites quelque chose de nouveau. En ajoutant la clause else, la syntaxe ressemble à ceci:

   Contenu à rendre lorsque la condition est vraie.


   Contenu à rendre lorsque la condition est fausse.

Démo

Construisons un composant angulaire à bascule simple pour illustrer la directive ngIf . Ouvrez votre ng canvas project que vous avez déjà décompressé dans VS Code, et à l'intérieur de votre répertoire src, vous trouverez un dossier d'application. Le fichier app.component.ts devrait ressembler à ceci:

 import {Component} de '@ angular / core';
@Composant({
  sélecteur: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
classe d'exportation AppComponent {
  title = 'ngcanvas';
}

Pour commencer, nous allons générer un nouveau composant avec lequel travailler. Ouvrez le terminal à l'intérieur de VS Code et exécutez la commande ci-dessous à l'intérieur:

 ng génère des comparaisons de composants

Vous devriez avoir un nouveau dossier de comparaisons dans le répertoire de l'application. Nettoyez votre fichier app.component.html et collez-y ce bloc de code:

  

     Bienvenue dans l'application ngIf
  

   

Pour la logique de basculement, ouvrez votre comparisons.component.html et remplacez le code de paragraphe (les comparaisons fonctionnent!) Par ce bloc de code ci-dessous:

   Basculer les salutations 


 Bonjour 
 Bonjour à vous 


 Aujourd'hui est vendredi et ceci est un élément de texte factice pour vous faire sentir mieux 
 Comprendre la directive ngIf avec la clause else 

Ici, nous avons d'abord créé un bouton et l'avons affecté à un événement toggleOn qui devient vrai ou faux lorsque vous cliquez.

Ensuite, nous avons une balise div qui contient les salutations. Sur la balise div, nous avons ajouté la directive ngIf qui serait affichée si la valeur de toggleOn est fausse. Après cela, nous avons ajouté quelques paragraphes factices.

Voici comment utiliser la directive ngIf . Il peut être utilisé dans tous les types de cas d'utilisation et de comparaisons auxquels vous pouvez penser dans votre modèle de composant.

La clause else

Il existe certains scénarios dans lesquels vous souhaitez afficher ou renvoyer autre chose si la condition que vous définissez ne fonctionne pas.

Comme se rendre au magasin pour acheter des Snickers mais ils sont en rupture de stock, vous obtenez donc Bounty à la place.

Angular fournit une amélioration supplémentaire à la directive ngIf en ajoutant un autre clause. Cela a également une logique très simple: si la condition que vous avez spécifiée n'est pas remplie, faites-le à la place.

Dans notre démo ci-dessus, vous voyez que si la valeur toggleOn est fausse, rien ne s'affiche; mais si elle est activée, les salutations seront affichées. Avec la clause else nous pouvons maintenant afficher quelque chose lorsque la valeur toggleOn est fausse. Modifiez votre fichier comparisons.component.html avec cette nouvelle version ci-dessous:

   Basculer les salutations 


 Bonjour 
 Bonjour à vous 

 Pas de salut, Lagbaja rien pour vous. 

 Aujourd'hui c'est vendredi et ce est un élément de texte factice pour vous faire sentir mieux 
 Comprendre la directive ngIf avec la clause else 

Maintenant, l'application affiche le contenu prédéfini du côté du reste lorsque vous faites vos comparaisons.

Autres avantages

La directive ngIf comporte également d'autres avantages que vous voudrez peut-être connaître, dont l'un est l'affectation des variables locales. Parfois, le résultat de la directive ngIf n'est pas un booléen. Angular vous permet d'enregistrer des variables localement et d'y accéder avec votre directive ngIf .

En utilisant l'analogie des collations que j'ai introduite dans la section else, ouvrez votre comparisons.component.ts fichier et remplacez le contenu par le bloc de code ci-dessous:

 import {Component, OnInit} from '@ angular / core';
@Composant({
  sélecteur: 'comparaisons d'applications',
  templateUrl: './comparisons.component.html',
  styleUrls: ['./comparisons.component.css']
})
export class ComparisonsComponent implémente OnInit {
  Collations = {
    chocolat: «Snickers»
  };
constructeur () {}
ngOnInit () {}
}

Nous avons maintenant déclaré un objet de collations et enregistré Snickers comme le seul type de chocolat qu'il contient. Mettez à jour votre fichier comparisons.component.html avec le bloc de code ci-dessous:

   Basculer les salutations 


 Bonjour 
 Bonjour à vous 

 Pas de salut, Lagbaja rien pour vous. 

 Aujourd'hui c'est vendredi et c'est un élément de texte factice pour vous faire sentir mieux 
 Comprendre la directive ngIf avec la clause else 

   Nice {{chocolate}}!


   Obtenez une prime à la place.

Si vous signifiez l'application, vous verrez que vous pouvez en effet accéder à Snickers depuis votre directive et même le bloc sinon . Les applications de ces concepts de la directive ngIf sont infinies et ne sont limitées qu'à votre créativité et aux cas d'utilisation que vous pouvez imaginer.

Conclusion

Vous avez traversé l'Angular ngIf et comment elle est utilisée pour faciliter la gestion des comparaisons. Vous avez également été initié à des concepts supplémentaires fournis par la directive, comme la clause else et l'affectation de variable locale, et comment vous pouvez commencer à les utiliser dans vos applications aujourd'hui. Bon codage!