Comment afficher une boîte de dialogue modale dans Angular

L'utilisation de boîtes de dialogue modales dans les applications Web 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 Angular 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.

1. Installez la bibliothèque

Nous devrons installer notre bibliothèque @developer-partners/ngx-modal-dialo g via NPM et l'inclure dans nos modules Angular pour pouvoir l'utiliser. Voici la commande NPM pour l'installer :

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 BookListComponent Typescript :

Notre classe BookListComponent 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 ModalService 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.

Ensuite, nous allons créer le fichier HTML pour BookListComponent où nous afficherons la liste des livres dans un tableau HTML :

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 createBook dans notre classe Typescript. La fonction createBook affiche la boîte de dialogue modale pour ajouter un nouveau livre à notre table. Voici le code Typescript de la fonction createBook :

La fonction createBook affiche la boîte de dialogue modale en appelant la fonction show de la classe ModalService . La fonction show 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 CreateEditBookComponent qui est le premier paramètre de la fonction show dans la capture d'écran ci-dessus.

Le composant CreateEditBookComponent 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 :

Voici à quoi ressemble l'interface utilisateur de la boîte de dialogue modale :

Voici le code Typescript du composant CreateEditBookComponent :

Le composant CreateEditBookComponent utilise un service angulaire appelé ModalReference à partir du ngx-modal-boîte de dialogue 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 d'annulation dans la capture d'écran ci-dessus. Nous appelons la fonction d'annulation 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 saveData . Dans la fonction saveData , nous fermons la boîte de dialogue modale comme dans la fonction cancel mais nous lui transmettons également la propriété book qui contient les données pour ajouter un nouveau livre à notre liste.

Le service ModalReference est un type générique. Lorsque nous appelons la fonction closeSuccess du service ModalReference , 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 Book . Le paramètre que nous passons à la fonction closeSuccess est renvoyé au composant qui a créé la boîte de dialogue modale en appelant la fonction show de la classe 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 newBook 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 de livres pour l'afficher dans l'interface utilisateur.

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 editBook a presque le même code que la fonction createBook 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é model des options de la boîte de dialogue.

Le paramètre que nous passons à la boîte de dialogue modale à l'aide de la propriété model devient disponible dans le service ModalReference dans le composant utilisé à l'intérieur de la boîte de dialogue via sa propriété config.model .

Dans la capture d'écran ci-dessus, nous copions le paramètre passé et l'assignons à la propriété book du composant CreateEditBookComponent . La propriété de modèle de l'objet ModalReference.config 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.

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.

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