L'utilisation de boîtes de dialogue modales dans   est assez courante. Que vous souhaitiez modifier un enregistrement dans une table sans accéder à une autre page, rechercher des données ou simplement afficher un message d'avertissement à vos utilisateurs, l'utilisation d'une boîte de dialogue modale peut être une excellente expérience utilisateur. Malheureusement, cela n'est pas très facile dans   sans une bibliothèque tierce. Cela nécessite d'écrire du code non trivial et de comprendre les mécanismes internes du framework Angular. C'est la raison pour laquelle nous avons développé une bibliothèque chez Developer Partners pour afficher les dialogues modaux dans Angular. Nous allons utiliser notre bibliothèque dans cet article. les applications Web Angular  1. Installez la bibliothèque  Nous devrons installer notre bibliothèque   via NPM et l'inclure dans nos modules Angular pour pouvoir l'utiliser. Voici la commande NPM pour l'installer : @developer-partners/ngx-modal-dialo  g   npm install @developer-partners/ngx-modal-dialog  Ensuite, nous devons l'inclure dans les modules Angular où nous devons utiliser des boîtes de dialogue modales. Notre application de démonstration est très petite, elle n'a qu'un seul module appelé AppModule. Nous devons inclure ModalModule de la bibliothèque dans le tableau des importations de notre module AppModule Angular :   Nous sommes prêts. Nous pouvons commencer à utiliser le composant de dialogue modal dans notre application.  2. Afficher une boîte de dialogue modale  Comme mentionné précédemment, nous allons afficher notre boîte de dialogue modale lorsque nous voulons ajouter ou modifier un livre dans notre liste de livres. Commençons par créer un composant où nous allons afficher la liste des livres. Nous allons créer un nouveau composant Angular et l'appeler   . BookListComponent  Voici le contenu de la classe   Typescript :  BookListComponent  Notre classe   utilise une liste de livres codée en dur comme données à afficher dans notre table pour plus de simplicité. Il a également besoin du service   Angular de la bibliothèque ngx-modal-dialog pour pouvoir afficher les boîtes de dialogue modales, c'est pourquoi nous l'avons injecté dans notre constructeur. BookListComponent ModalService  Ensuite, nous allons créer le fichier HTML pour   où nous afficherons la liste des livres dans un tableau HTML :  BookListComponent  Le code HTML ci-dessus est assez simple. Il affiche la liste des livres dans un tableau. Il a également un bouton appelé "Ajouter un nouveau livre".  Voici à quoi ressemble l'interface utilisateur jusqu'à présent :   Lorsque le bouton "Ajouter un nouveau livre" est cliqué, il appelle la fonction   dans notre classe Typescript. La fonction   affiche la boîte de dialogue modale pour ajouter un nouveau livre à notre table. Voici le code Typescript de la fonction   :  createBook createBook createBook  La fonction   affiche la boîte de dialogue modale en appelant la fonction   de la classe   . La fonction   prend 2 paramètres : la classe du composant Angular à afficher dans la boîte de dialogue modale et les options de la boîte de dialogue modale qui sont les paramètres de la boîte de dialogue tels que le titre, la taille, la position et quelques autres choses. La boîte de dialogue modale a besoin d'un composant angulaire pour s'afficher dans son corps. Sans ce composant, notre boîte de dialogue modale ne serait qu'un panneau vide recouvrant l'écran. Ce composant est   qui est le premier paramètre de la fonction   dans la capture d'écran ci-dessus. createBook show ModalService show CreateEditBookComponent show  Le composant   Angular sera responsable à la fois de l'ajout et de l'édition de livres. Nous allons commencer par travailler sur le code pour ajouter de nouveaux livres. Voici le code HTML du CreateEditBookComponent qui n'a que quelques champs pour entrer l'ID et le titre du livre que nous voulons créer et a des boutons pour fermer la boîte de dialogue et enregistrer les données :  CreateEditBookComponent  Voici à quoi ressemble l'interface utilisateur de la boîte de dialogue modale :   Voici le code Typescript du composant CreateEditBookComponent :   Le composant   utilise un service angulaire appelé   à partir du  bibliothèque. Nous utilisons ce service pour interagir avec le dialogue modal où notre composant est placé, comme fermer le modal ou s'abonner à ses événements. Nous fermons simplement la boîte de dialogue modale dans la fonction   dans la capture d'écran ci-dessus. Nous appelons la fonction   lorsque le bouton "Annuler" de HTML est cliqué. Lorsque nous cliquons sur le bouton "Enregistrer" dans le code HTML, il soumet le formulaire qui appelle la fonction   . Dans la fonction   , nous fermons la boîte de dialogue modale comme dans la fonction   mais nous lui transmettons également la propriété   qui contient les données pour ajouter un nouveau livre à notre liste. CreateEditBookComponent ModalReference   ngx-modal-boîte de dialogue d'annulation d'annulation saveData saveData cancel book  Le service   est un type générique. Lorsque nous appelons la fonction   du service   , nous devons passer un objet du même type que son paramètre générique. Dans notre cas, il s'agit d'une interface Typescript appelée   . Le paramètre que nous passons à la fonction   est renvoyé au composant qui a créé la boîte de dialogue modale en appelant la fonction   de la classe   .  ModalReference closeSuccess ModalReference Book closeSuccess show ModalService  Lorsque l'appel de la fonction closeSuccess du service ModalReference, il ferme la boîte de dialogue modale et déclenche un événement RxJS transmettant le livre nouvellement créé aux abonnés de cet événement. Dans la capture d'écran ci-dessus, le paramètre   de notre fonction de rappel est le livre nouvellement créé que nous avons reçu de la boîte de dialogue modale, nous l'ajoutons donc simplement à notre tableau   pour l'afficher dans l'interface utilisateur. newBook de livres  3. Transmission de données aux dialogues modaux  Dans certains cas, vous devez transmettre certaines données aux boîtes de dialogue modales. Par exemple, si nous voulons éditer un livre de la liste, nous pouvons passer la notice du livre que nous voulons éditer à la boîte de dialogue modale pour avoir les données initiales que nous voulons modifier.  Commençons par ajouter un bouton aux lignes du tableau pour modifier les données des lignes :   Voici à quoi ressemble l'interface utilisateur avec le bouton Modifier dans chaque ligne du tableau :   La fonction   a presque le même code que la fonction   avec une seule différence importante. Il passe le livre que nous voulons éditer à la boîte de dialogue modale en utilisant la propriété   des options de la boîte de dialogue.  editBook createBook model  Le paramètre que nous passons à la boîte de dialogue modale à l'aide de la propriété   devient disponible dans le service   dans le composant utilisé à l'intérieur de la boîte de dialogue via sa propriété   .  model ModalReference config.model  Dans la capture d'écran ci-dessus, nous copions le paramètre passé et l'assignons à la propriété   du composant   . La propriété de   de l'objet   est transmise par référence, de sorte que toute modification apportée aux propriétés de cet objet sera reflétée dans le tableau où nous affichons la liste des livres. La raison pour laquelle nous le copions est de ne pas modifier la ligne dans le tableau tant que l'utilisateur n'a pas cliqué sur le bouton "Enregistrer". Si l'utilisateur clique sur le bouton "Annuler", les données du tableau ne seront pas mises à jour. book CreateEditBookComponent modèle ModalReference.config  Voici à quoi ressemble la boîte de dialogue modale Modifier le livre :   Conclusion  Construire une boîte de dialogue modale pour Angular à partir de zéro n'est pas facile, mais c'est beaucoup plus facile avec notre bibliothèque de boîtes de dialogue modales. Nous avons expliqué comment configurer la bibliothèque et l'utiliser pour afficher des boîtes de dialogue modales dans votre projet. Nous avons passé en revue la plupart des cas d'utilisation de base et des fonctionnalités des boîtes de dialogue, mais la bibliothèque @developer-partners/ngx-modal-dialog possède de nombreuses autres fonctionnalités que vous pourriez trouver utiles dans vos projets réels.  Également publié  ici.  Veuillez suivre le lien ci-dessous pour en savoir plus à ce sujet :   @developer-partners/ngx-modal-dialog  Si vous souhaitez afficher un joli spinner de chargement dans vos boîtes de dialogue modales, veuillez consulter notre article sur la construction d'un spinner de chargement dans Angular :   Comment créer un spinner de chargement en angulaire

This story contains AI-generated text. The author has used AI either for research, to generate outlines, or write the text itself. 

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

This writer has a vested interest be it monetary, business, or otherwise, with 1 or more of the products or companies mentioned within.

Comment afficher une boîte de dialogue modale dans Angular

About Author

COMMENTAIRES

ÉTIQUETTES

CET ARTICLE A ÉTÉ PARU DANS

Related Stories

Valhalla de Floki se joint en tant que sponsor associé de la tournée indienne au Sri Lanka

HackerNoon Decoded: The Top 10 Countries Where HackerNoon Is the Most Active

Créer des produits cryptographiques centrés sur l'utilisateur : l'importance des retours clients

Les couches invisibles : pourquoi les entretiens avec les utilisateurs sont un atout irremplaçable

Valhalla de Floki se joint en tant que sponsor associé de la tournée indienne au Sri Lanka

HackerNoon Decoded: The Top 10 Countries Where HackerNoon Is the Most Active

Créer des produits cryptographiques centrés sur l'utilisateur : l'importance des retours clients

Les couches invisibles : pourquoi les entretiens avec les utilisateurs sont un atout irremplaçable

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps