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.

Cet audio est produit dans la langue originale de l'histoire !

Trop long; Pour lire

Making security fun one episode at a time

Comment afficher une boîte de dialogue modale dans Angular

Trop long; Pour lire

Developer Partners

STORY’S CREDIBILITY

AI-assisted

Guide

Vested Interest

About Author

ÉTIQUETTES

Languages

CET ARTICLE A ÉTÉ PARU DANS...

Comment afficher une boîte de dialogue modale dans Angular

Trop long; Pour lire

Developer Partners

STORY’S CREDIBILITY

AI-assisted

Guide

Vested Interest

About Author

ÉTIQUETTES

Languages

CET ARTICLE A ÉTÉ PARU DANS...

HISTOIRES CONNEXES