Angular Basics : instructions conditionnelles avec NgSwitch

Aujourd'hui, nous examinerons la directive ngSwitch dans Angular et comment elle peut être utilisée dans votre flux de travail.

Conditions préalables

Les développeurs de tous niveaux, des débutants aux experts, peuvent lire cet article. Peu importe si vous connaissez les concepts pour débutants dans Angular. Pour pouvoir suivre la démonstration de cet article, vous devez avoir :

• VS Code comme environnement de développement intégré
• Node version 11.0 installé sur votre machine
• Node Package Manager version 6.7 (il est généralement livré avec l'installation de Node)
• CLI angulaireversion 8.0 ou supérieure
• Une version récente d'Angular (ce post utilise la version 12)

Parmi les autres avantages, citons :

• Connaissance pratique du framework Angular à un niveau débutant

En savoir plus sur les instructions conditionnelles

Jusqu'ici nous avons regardéconditionneldes déclarations comme leDirective ngIfdans Angular qui vous permet d'afficher un élément dans l'interface utilisateur si une condition définie est remplie et comment Angular le rend vraiment facile à utiliser.

Avec l'instruction if, vous ne pouvez résoudre que pour "ou" – le résultat sera toujours booléen, soit vrai ou faux.

Parfois, vous voulez résoudre plus de deux résultats. C'est pourquoi nous avons les instructions if/else dans de nombreux langages de programmation. Angular fournit un moyen simple de résoudre plusieurs résultats connus.

Qu'est-ce que NgSwitch ?

Selon les Angular Docs, lengSwitch La directive sur un conteneur spécifie une expression à comparer. Les expressions à faire correspondre sont fournies parngSwitchCasedirectives sur les vues dans le conteneur.

Jetons un coup d'œil à cela avec un projet dans le code.

Ce que nous construisons

Nous allons configurer un projet Angular à l'aide de l'assistant d'interface utilisateur de Kendo, puis illustrer le fonctionnement de ngSwitch en utilisant de nombreuses instructions if jointes.

Configuration du projet

Tout d'abord, créons le projet. Ouvrez votre code VS et accédez à l'onglet Extensions et recherchez l'assistant de modèle d'interface utilisateur Kendo. Installez-le et rechargez votre application VS Code. Maintenant, vous avez l'assistant, mettons-nous au travail !

Pour utiliser l'assistant dans l'application VS Code, ouvrez la palette de commandes (appuyez sur Commande + Maj + P sur Mac ou Ctrl + Maj + P sur un PC) et sélectionnez l'assistant de l'interface utilisateur Kendo. Il ouvrira une invite où vous nommerez le projet et choisirez l'emplacement sur votre machine où vous voulez qu'il soit situé.

Après avoir spécifié cela, cliquez sur le bouton suivant et vous serez amené à une nouvelle invite qui vous demandera avec quel framework vous voulez construire.

Choisissez Angulaire et cliquez sur Suivant. La prochaine invite qui s'affiche veut connaître la structure dans laquelle vous voulez que votre application soit. Je veux une page d'accueil et une autre page vierge vers laquelle je peux acheminer, donc je choisis 1 page vierge.

Vous pouvez jouer avec différentes structures pour voir comment il est généré. Après avoir choisi la structure souhaitée, cliquez sur le bouton Suivant.

Cette dernière invite pose des questions sur le style. Ainsi, l'interface utilisateur de Kendo par défaut peut démarrer votre projet avec un style CSS de base ou une conception Bootstrap ou Material. J'ai choisi Bootstrap et, à droite, vous pouvez voir le résumé des détails du projet.

Maintenant, votre application a été générée, juste comme ça. Ouvrez le projet dans VS Code, ouvrez un nouveau terminal et exécutez la commande ci-dessous pour installer tous les packages avec leurs dernières versions.

installation npm

Une fois l'installation terminée, testons si tout est correct. Exécutez le serveur de développement Angular avec cette commande :

de servir

Ouvrez votre navigateur pourhttp://localhost:4200/homeet ça devrait ressembler à ça :

Démonstration de NgSwitch

Supposons qu'il n'y ait que cinq marques de voitures dans le monde : Land Rover, Chery, Benz, Lexus et Tesla, correspondant à 1, 2, 3, 4 et 5. Nous allons afficher les voitures dans différentes couleurs Bootstrap dans l'interface utilisateur en fonction dans des conditions prédéfinies.

Copiez le bloc de code dans votre fichier component.ts :

importer {Composant} à partir de '@angular/noyau';@Composant({sélecteur: 'app-accueil',templateUrl: './home.composant.html'
})
exportation classer AccueilComposant {voitures: quelconque[] = [
    {
      "Nom": "Mercedes Benz",
      "numéro": 1,
      "de campagne": 'Allemagne'
    },
    {
      "Nom": " Tesla ",
      "numéro": 2,
      "de campagne": 'États-Unis'
    },
    {
      "Nom": "Lexus",
      "numéro": 3,
      "de campagne": 'Japon'
    },
    {
      "Nom": "Land Rover",
      "numéro": 4,
      "de campagne": 'Angleterre'
    },
    {
      "Nom": "Chéry",
      "numéro": 5,
      "de campagne": 'Chine'
    }
  ];
}

Ce sont les données des composants que nous utiliserons aujourd'hui. Accédez au dossier des composants et copiez le bloc de code ci-dessous dans le fichier home component.html :

<div classer="conteneur mt-5">
    <h3>Marques de voitures et origines</h3>
    <la *ngPour="laisser la voiture des voitures"><au * ngIf="voiture.numéro === 1"classer="texte-succès">{{ car.name }} ({{ car.country }})</au><au * ngIf="voiture.numéro === 2"classer="texte-primaire">{{ car.name }} ({{ car.country }})</au><au * ngIf="voiture.numéro === 3"classer="avertissement textuel">{{ car.name }} ({{ car.country }})</au><au * ngIf="numéro.voiture !== 1 && numéro.voiture !== 2 && numéro.voiture !== 3"classer="texte-danger">{{ car.name }} ({{ car.country }})</au></la></div>

C'est ainsi que nous allons parcourir le tableau avec environ quatresi déclarations pour colorer trois marques de voitures différemment et le reste des marques en rouge. Dans les situations où vous connaissez quelques résultats possibles mais souhaitez ensuite gérer le reste d'une manière spécifique, Angular fournit l'instruction switch pour le faire facilement.

Syntaxe NgSwitch

La syntaxe de ngSwitch ressemble à ceci :

<div [ngSwitch]="Expression">
    <div *ngSwitchCase="Première expression correspondante">Une</div>
    <div *ngSwitchCase="Deuxième expression correspondante">Deux</div>
    <div *ngSwitchCase="Troisième expression correspondante">Trois</div>
    <div *ngSwitchDefault="Autre expression">Dernier</div></div>

Vous déclarez donc l'expression, puis utilisez les options de casse, qui peuvent en inclure autant que possible pour indiquer à Angular la vue à afficher s'il y a une correspondance. Enfin, tout comme avec if/else, le commutateur default agit comme else. Cela signifie qu'il sera affiché si aucun des cas ne correspond.

Pourquoi NgSwitch ?

Tout d'abord, le ngSwitch est exactement le même que les instructions switch de nombreux autres langages de programmation, il n'y a donc aucune nouvelle courbe d'apprentissage pour l'utiliser. C'est aussi une façon plus propre de faire les choses afin que vous n'ayez pas un enfer de boucle conditionnellesidéclarations éparpillées dans votre présentation.

Pour obtenir la même chose avec une instruction switch dans Angular, voici à quoi cela ressemblerait :

<div classer="conteneur mt-5">
    <h3>Marques de voitures et origines</h3><la *ngPour="laisser la voiture des voitures"[ngSwitch]="numéro d'immatriculation"><au *ngSwitchCase="1"classer="texte-succès">{{ car.name }} ({{ car.country }})</au><au *ngSwitchCase="2"classer="texte-primaire">{{ car.name }} ({{ car.country }})</au><au *ngSwitchCase="3"classer="texte sombre">{{ car.name }} ({{ car.country }})</au><au *ngSwitchDefault
      classer="avertissement textuel">{{ car.name }} ({{ car.country }})</au></la></div>

Cela donne exactement les mêmes résultats et est beaucoup plus concis.

Emballer

Dans l'article d'aujourd'hui, nous avons examiné la directive ngSwitch pour gérer le rendu conditionnel avec certains résultats connus. Nous avons examiné en quoi elle diffère de la directive ngIf et comment elle peut être utilisée pour obtenir les meilleurs résultats. Bon piratage !