L'instruction if...else en Angular

Nous présenterons comment utiliser les instructions if dans les applications Angular et discuterons d’exemples.

Utilisation de l’instruction if dans Angular

En programmation, les instructions if sont des blocs logiques. Ces instructions conditionnelles indiquent à l’ordinateur quoi faire lorsqu’une condition particulière est vraie ou fausse.

À l’ère moderne des applications Web, les instructions if facilitent la vie des programmeurs pour comprendre quand exécuter un bloc de code spécifique en fonction des conditions.

Il existe différentes manières d’utiliser les instructions if dans angular en utilisant *ng-if ou une autre méthode simple dont nous parlerons dans un exemple.

Créons une nouvelle application en utilisant la commande suivante :

# angular
ng new my-app

Après avoir créé notre nouvelle application en Angular, nous irons dans notre répertoire d’application à l’aide de cette commande.

# angular
cd my-app

Maintenant, exécutons notre application pour vérifier si toutes les dépendances sont correctement installées.

# angular
ng serve --open

Ensuite, dans app.component.ts, nous allons définir une variable statement comme false. Nous allons utiliser cette variable pour exécuter notre code.

# angular
statement = false;

Maintenant, dans app.component.html, nous allons créer un modèle en utilisant la variable statement qui affichera le contenu indiquant que la déclaration est vraie si nous avons défini la variable sur true.

Il affichera la déclaration est faux si nous avons défini la variable sur false.

# angular
<hello name="{{ name }}"></hello>
<h2>{{ statement ? 'This statement is True' : 'This statement is false' }}</h2>

Testons notre application pour voir si elle fonctionne lors du changement de la valeur statement.

Production:

Modifiez la valeur de l’instruction, définissez-la sur true et vérifiez son fonctionnement.

Production:

Ainsi, comme vous pouvez le voir, lorsque nous modifions la valeur de la variable statement, le code s’exécute et affiche la valeur que nous voulons voir en utilisant une simple méthode d’instruction.

Imaginons un bloc que nous voulons afficher à l’intérieur d’un div où l’instruction if-else est exécutée. Nous pouvons utiliser l’instruction *ng-if et définir les identifiants des blocs que nous voulons afficher lorsque la condition est bonne ou mauvaise.

Nous allons définir une nouvelle variable element comme 1. Notre code dans app.component.ts ressemblera à ci-dessous.

# angular
import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  statement = true;
  element = 1;
}

Créez un modèle dans app.component.html. Nous aurons un div avec une instruction *ng-if qui affichera un bloc trueBlock, et si la valeur de element n’est pas 1, alors il affichera le bloc avec un id de falseBlock.

<div *ngIf="element == 1; then trueBlock; else falseBlock"></div>

<ng-template #trueBlock><button>Login</button></ng-template>
<ng-template #falseBlock><button>Logout</button></ng-template>

Vérifions comment cela fonctionne.

Production:

Essayez de changer la valeur de l'élément et vérifiez comment cela fonctionne.

# angular
element = 2;

Production:

Comme vous pouvez le voir dans l’exemple ci-dessus, nous pouvons facilement afficher les blocs de code en utilisant l’instruction *ng-if et en appelant l’identifiant du bloc.