Utiliser ngIf Else sur Angular

1. Utilisez le *ngIf comme une fonction autonome dans Angular
2. Utilisez le *ngIf avec else
3. Utilisez les instructions *ngIf avec else et then dans Angular

Lorsque nous créons des applications Web en tant que développeurs, nous devons configurer l’application Web pour ajuster les pages à la volée. l’instruction *ngIf devient pratique. *ngIf est utilisé pour manipuler les éléments HTTP rendus sur une page.

Cela fonctionne dans une condition dans laquelle nous disons à l’application Web d’exécuter une certaine fonction après la mise en place de certains paramètres. Et lorsque de tels paramètres ne sont pas en place, il doit en effectuer un autre à la place.

Nous effectuerons certaines fonctions en utilisant uniquement le *ngIf. Ensuite, nous combinerons le *ngIf avec l’instruction else et verrons ce qui est possible. Enfin, nous utiliserons la combinaison *ngIf else then pour manipuler les éléments HTTP.

Utilisez le *ngIf comme une fonction autonome dans Angular

Donc ici, nous utiliserons l’instruction *ngIf à côté des conditions true ou false.

Nous ferons tout le travail dans le app.component.html.

<h1>*ngIf in Angular</h1>
<h2 *ngIf="true">
  Hi, Youtube
</h2>

La page Web affiche Hi, Youtube lorsque la condition *ngIf est définie sur true. Une fois qu’il est changé en faux, le Hi, Youtube disparaît de la page Web.

On peut aussi passer la fonction à travers le app.component.ts comme ceci :

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  title = "CodeSandbox";
  displayMe=true;
}

Et nous changeons ensuite la valeur *ngIf en displayMe comme ci-dessous :

<h1>*ngIf in ANgular</h1>
<h2 *ngIf="displayMe">
  Hi, Youtube
</h2>

Tout comme le premier exemple, les règles de base fonctionnent de la même manière.

Utilisez le *ngIf avec else

Lorsque la condition *ngIf est combinée avec la déclaration else, cela nous aide à décider quel contenu nous voulons voir apparaître sur la page Web à tout moment.

Cette méthode nécessite que nous emboîtions l’autre déclaration que nous voulons voir apparaître dans Salut, Youtube à l’intérieur de la balise ng-template.

Le app.component.html ressemblera alors à ceci :

<h1>*ngIf in ANgular</h1>
<h2 *ngIf="displayMe else elseBlock">
  Hi, Youtube
</h2>
<ng-template #elseBlock>
<h2>
    Hi, Twitter
    </h2>
</ng-template>

Vous remarquerez que nous avons utilisé la déclaration else à côté de la condition *ngIf, ce qui nous permet d’avoir un meilleur contrôle sur le contenu de la page Web.

Ainsi dans le app.component.ts, lorsque le displayMe a une vraie valeur, Hi, Youtube s’affichera. Si c’est faux, Hello, Twitter s’affichera.

Utilisez les instructions *ngIf avec else et then dans Angular

Dans l’exemple précédent, nous avons découvert le ng-template, qui fonctionne parallèlement à l’instruction else. Lorsqu’elle est utilisée avec *ngIf et else, l’instruction then permet de manipuler le contenu du ng-template.

C’est une solution bienvenue pour un codeur qui souhaite conserver un fichier de code structuré et bien organisé.

Notre app.component.html sera configuré comme tel :

<h1>*ngIf in ANgular</h1>
<h2 *ngIf="displayMe; then ifBlock else elseBlock">
  Hi, Youtube
</h2>
<ng-template #ifBlock>
<h2>
    Hi, Google
    </h2>
</ng-template>
<ng-template #elseBlock>
<h2>
    Hi, Twitter
    </h2>
</ng-template>

Ainsi, dans app.component.ts, lorsque le displayMe a une vraie valeur, Hi, Google s’affichera, et lorsqu’il s’agit de la fausse valeur, Hi, Twitter s’affichera.