Ng-If en Angular avec plusieurs conditions

1. Fonctionnement de ng-if dans AngularJS
2. <ng-template> dans AngularJS
3. Utilisation de ngIf avec plusieurs conditions
4. Comparer les chaînes pour l’égalité en utilisant *ngIf

Une directive ngIf est un outil puissant dans AngularJS (https://angular.io/features) qui vous permet d’afficher et de masquer dynamiquement le contenu HTML. Il peut également afficher ou masquer le contenu en fonction d’une expression. Si l’instruction de la directive ngIf donne une valeur booléenne TRUE, l’élément est inséré dans la vue HTML ; sinon, il est entièrement supprimé du DOM. Cet article traitera du ngIf d’AngularJS avec plusieurs conditions.

Syntaxe:

<element ng-if="expression"**>
</element>**

Fonctionnement de ng-if dans AngularJS

Il est essentiel de comprendre que toutes les directives In-Built fournies par le framework AngularJS seront toujours désignées par le préfixe ng dans le framework AngularJS. L’instruction de la directive ng-if est évaluée à une valeur booléenne, telle que True ou False, et l’élément est affiché sur le DOM HTML en fonction de cette valeur.

Lorsque l’évaluation de l’expression ng-if renvoie une valeur False, l’élément est supprimé du DOM. Une autre chose à garder à l’esprit est que lorsqu’un élément HTML est supprimé avec ngIf, sa portée est détruite, et lorsque l’élément est remis dans la vue, une nouvelle portée est établie.

Ici, vous devez comprendre la différence entre la directive Angular ng-if et ng-show avant d’entrer dans les profondeurs.

Lorsque l’évaluation de l’expression de la directive ng-if est FALSE, l’élément est supprimé du DOM ; cependant, lorsque l’évaluation de l’expression de la directive ng-show est FALSE, l’élément est caché dans le DOM au lieu d’être supprimé, ce qui est fait en utilisant l’attribut CSS de display hidden.

Exemple

Si vous avez une formation PHP, vous pouvez écrire des blocs if-else directement dans les modèles HTML, comme indiqué ci-dessous.

if(display){
  <div>I am here</div>
}

else{
  <div>
   I am not here
  </div>
 }

Cependant, nous ne pouvons pas utiliser de crochets en HTML pour écrire des blocs if-else car seuls les éléments de balisage doivent être inclus dans le fichier HTML. La solution idéale sera de remplacer if...else condition bloque par quelque chose.

<ng-template> dans AngularJS

Avant la directive fondamentale, ngIf, avez-vous déjà considéré l’astérisque (*) ? Lors de l’utilisation d’éléments HTML dans la directive ngIf, angular enveloppera cet élément dans une balise <ng-template> avec la condition fournie. Pour en savoir plus sur ng-template, cliquez ici.

<ng-template [ngIf]="display">

  <div>I am Playing</div>

</ng-template> 

Dans le framework Angular, <ng-template> est un pseudo-élément qui ne sera pas inclus dans la sortie HTML finale. Seuls les éléments du <ng-template> seront insérés. Si l’élément a des caractéristiques, comme un identifiant ou une classe, utilisez-les. Ces éléments seront ajoutés à l’élément <div> dans le <ng-template>.

<div *ngIf="display" class="information" id="info">
  I am Playing
</div> 
 
 <ng-template [ngIf]="display">
    <div class="information" id="info">
      I am Playing
    </div>
 </ng-template>

Utilisation de ngIf avec plusieurs conditions

Discutons des conditions suivantes de AngularJS ng-if.

La première est la condition ET, la deuxième est la condition OU et la troisième est la condition NON.

ET Condition en *ngIf (&&)

Pour déterminer la crédibilité d’une instruction *ngIf, nous pouvons utiliser de nombreuses conditions avec l’opérateur logique ET (&&). L’élément sera ajouté au DOM si toutes les conditions sont remplies. L’exemple suivant montre comment AngularJS évalue une condition ET :

<div *ngIf="isCar && isBike">

 <span>{{Name}}</span>

</div>

OU Condition en *ngIf (||)

Si une seule des conditions est vraie, vous pouvez utiliser *ngIf pour afficher l’élément à l’aide de l’opérateur OU (||). L’extrait de code suivant illustre l’utilisation de la condition OR dans *ngIf.

 <div *ngIf="isCar || isBike">
   // Show Price comparison chart
 </div>

OU Condition en *ngIf (!)

Pour inverser la condition *ngIf, nous pouvons utiliser l’opérateur NOT (!) comme indiqué ci-dessous.

<div *ngIf="!isCar">
	//Show the Prices of Bikes
</div>

Comparer les chaînes pour l’égalité en utilisant *ngIf

Dans l’instruction *ngIf, nous pouvons appliquer les opérateurs double égal (==) ou triple égal (===) pour comparer les chaînes pour l’égalité.

Lors de la comparaison de chaînes pour l’égalité, il est simple de mal placer ou d’oublier d’utiliser double égal ou triple égal et d’utiliser à la place l’opérateur d’affectation (simple égal).

Lorsque vous utilisez un opérateur d’affectation à l’intérieur de *ngIf, vous obtenez l’erreur Parser Error : Bindings cannot contain assignments at column, comme indiqué ci-dessous.

<div *ngIf="Items.type = 'Cosmetics'">
// Show the Cosmetics items
</div>

Lors de la comparaison d’une chaîne statique à l’intérieur d’un *ngIf, les guillemets doivent être utilisés. Il n’est pas nécessaire d’utiliser des guillemets lors de la comparaison des variables de chaîne de composants.