Utiliser ngSwitch dans Angular

Vous avez entendu et utilisé au moins une fois des instructions switch dans des langages de programmation généraux.

Une instruction switch est utilisée pour exécuter un bloc de code lorsqu’il y a de nombreuses instructions if, et nous convertissons ces instructions if en instructions switch pour gagner du temps et rendre le travail plus efficace.

Dans ce tutoriel, nous allons passer par un exemple dans lequel nous allons créer un scénario pour que l’instruction switch soit exécutée en fonction du jour de la semaine et affiche un certain bloc de code pour un certain jour de la semaine.

Comment utiliser le ngSwitch dans Angular

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

# angular
ng new my-app

Après avoir créé notre nouvelle application dans 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

Nous allons créer un nouveau composant en utilisant la commande suivante.

# angular
ng g c greeting

Dans greeting.component.ts, nous allons créer un jour pour stocker le jour de la semaine en cours.

# angular
day = new Date().getDay();

Nous allons créer une instruction switch de sorte que si le jour renvoie 0, ce sera un dimanche, et 1 sera un lundi, et ainsi de suite. Nous allons donc lier day en utilisant [ngSwitch] et utiliser ngSwitchCase pour afficher différentes vues pour chaque jour dans greeting.component.html.

<h1>Hello! Good Morning</h1>

<div [ngSwitch]="day">
  <div *ngSwitchCase="0">Today is Sunday! Have a nice weekend</div>
  <div *ngSwitchCase="1"><h3>Today is Monday, Have a nice day</h3></div>
  <div *ngSwitchCase="2"><h3>Today is Tuesday, Have a nice day</h3></div>
  <div *ngSwitchCase="3"><h3>Today is Wednesday, Have a nice day</h3></div>
  <div *ngSwitchCase="4"><h3>Today is Thursday, Have a nice day</h3></div>
  <div *ngSwitchCase="5"><h3>Today is Friday, Have a nice day</h3></div>
  <div *ngSwitchCase="6"><h3>Today is Saturday, Have a nice weekend</h3></div>
  <div *ngSwitchDefault>Uh oh! Somethings wrong</div>
</div>

Production:

L’exemple ci-dessus montre que ngSwitch a affiché que le jour est samedi. Ainsi, de cette manière, en utilisant ngSwitch et ngSwitchCase, nous pouvons afficher n’importe quel bloc de code en fonction des scénarios de cas.

Démo ici