Cómo mostrar un diálogo modal en Angular

El uso de diálogos modales en aplicaciones web es bastante común. Ya sea que desee editar un registro en una tabla sin navegar a una página diferente, buscar algunos datos o simplemente mostrar un mensaje de advertencia a sus usuarios, usar un cuadro de diálogo modal puede ser una excelente experiencia para el usuario. Desafortunadamente, hacer eso no es muy fácil en Angular sin una biblioteca de terceros. Requiere escribir un código no trivial y comprender los mecanismos internos del marco Angular. Esa es la razón por la que desarrollamos una biblioteca en Developer Partners para mostrar cuadros de diálogo modales en Angular. Vamos a utilizar nuestra biblioteca en este artículo.

1. Instalar la biblioteca

Tendremos que instalar nuestra biblioteca @developer-partners/ngx-modal-dialo g a través de NPM e incluirla en nuestros módulos Angular para poder usarla. Aquí está el comando NPM para instalarlo:

npm install @developer-partners/ngx-modal-dialog

A continuación, tenemos que incluirlo en los módulos Angular donde tenemos que usar cuadros de diálogo modales. Nuestra aplicación de demostración es muy pequeña, solo tiene un módulo llamado AppModule. Tenemos que incluir ModalModule de la biblioteca en la matriz de importaciones de nuestro módulo AppModule Angular:

Estamos listos. Podemos comenzar a usar el componente de diálogo modal en nuestra aplicación.

2. Mostrar un diálogo modal

Como se mencionó anteriormente, mostraremos nuestro diálogo modal cuando queramos agregar o editar un libro en nuestra lista de libros. Primero vamos a crear un componente donde vamos a mostrar la lista de libros. Vamos a crear un nuevo componente Angular y lo llamaremos BookListComponent .

Este es el contenido de la clase BookListComponent Typescript:

Nuestra clase BookListComponent utiliza una lista codificada de libros como datos para mostrar en nuestra tabla por simplicidad. También necesita el servicio ModalService Angular de la biblioteca ngx-modal-dialog para poder mostrar los diálogos modales, por eso lo inyectamos en nuestro constructor.

A continuación, crearemos el archivo HTML para BookListComponent donde mostraremos la lista de libros en una tabla HTML:

El código HTML anterior es bastante simple. Muestra la lista de libros en una tabla. También tiene un botón llamado "Agregar nuevo libro".

Así es como se ve la interfaz de usuario hasta ahora:

Cuando se hace clic en el botón "Agregar nuevo libro", llama a la función createBook en nuestra clase Typescript. La función createBook muestra el diálogo modal para agregar un nuevo libro a nuestra tabla. Este es el código mecanografiado de la función createBook :

La función createBook muestra el cuadro de diálogo modal llamando a la función show de la clase ModalService . La función show toma 2 parámetros: la clase del componente Angular para mostrar dentro del cuadro de diálogo modal y las opciones del cuadro de diálogo modal, que son las configuraciones del cuadro de diálogo, como el título, el tamaño, la posición y algunas otras cosas. El cuadro de diálogo modal necesita un componente Angular para mostrar en su cuerpo. Sin ese componente, nuestro cuadro de diálogo modal sería solo un panel vacío superpuesto a la pantalla. Ese componente es CreateEditBookComponent , que es el primer parámetro de la función de mostrar en la captura de pantalla anterior.

El componente Angular CreateEditBookComponent será responsable de agregar y editar libros. Comenzaremos trabajando en el código para agregar nuevos libros. Aquí está el código HTML de CreateEditBookComponent que tiene solo unos pocos campos para ingresar la ID y el título del libro que queremos crear y tiene botones para cerrar el cuadro de diálogo y guardar los datos:

Así es como se ve la interfaz de usuario del cuadro de diálogo modal:

Aquí está el código Typescript del componente CreateEditBookComponent:

El componente CreateEditBookComponent usa un servicio Angular llamado ModalReference del ngx-modal-diálogo biblioteca. Usamos ese servicio para interactuar con el cuadro de diálogo modal donde se coloca nuestro componente, como cerrar el modal o suscribirse a sus eventos. Simplemente cerramos el cuadro de diálogo modal en la función de cancelación en la captura de pantalla anterior. Llamamos a la función cancelar cuando se hace clic en el botón "Cancelar" de HTML. Cuando hacemos clic en el botón "Guardar" en el código HTML, envía el formulario que llama a la función saveData . En la función saveData , cerramos el cuadro de diálogo modal al igual que en la función cancelar , pero también le pasamos la propiedad del libro que contiene los datos para agregar un nuevo libro a nuestra lista.

El servicio ModalReference es un tipo genérico. Cuando llamamos a la función closeSuccess del servicio ModalReference , tenemos que pasar un objeto del mismo tipo que su parámetro genérico. En nuestro caso, es una interfaz Typescript llamada Book . El parámetro que pasamos a la función closeSuccess se devuelve al componente que creó el cuadro de diálogo modal llamando a la función show de la clase ModalService .

Cuando llama a la función closeSuccess del servicio ModalReference, cierra el cuadro de diálogo modal y activa un evento RxJS que pasa el libro recién creado a los suscriptores de ese evento. En la captura de pantalla anterior, el parámetro newBook de nuestra función de devolución de llamada es el libro recién creado que recibimos del cuadro de diálogo modal, por lo que simplemente lo agregamos a nuestra matriz de libros para mostrarlo en la interfaz de usuario.

3. Pasar datos a cuadros de diálogo modales

Hay algunos casos en los que necesita pasar algunos datos a los cuadros de diálogo modales. Por ejemplo, si queremos editar un libro de la lista, podemos pasar el registro del libro que queremos editar al diálogo modal para tener los datos iniciales que queremos modificar.

Comencemos agregando un botón a las filas de la tabla para editar los datos de la fila:

Así es como se ve la interfaz de usuario con el botón Editar en cada fila de la tabla:

La función editBook tiene casi el mismo código que la función createBook con solo una diferencia importante. Pasa el libro que queremos editar al diálogo modal usando la propiedad modelo de las opciones del diálogo.

El parámetro que pasamos al diálogo modal usando la propiedad del modelo está disponible en el servicio ModalReference en el componente usado dentro del diálogo a través de su propiedad config.model .

En la captura de pantalla anterior, estamos copiando el parámetro pasado y asignándolo a la propiedad del libro del componente CreateEditBookComponent . La propiedad del modelo del objeto ModalReference.config se pasa por referencia, por lo que cualquier cambio que hagamos en las propiedades de ese objeto se verá reflejado en la tabla donde mostramos la lista de libros. La razón por la que lo copiamos es para no modificar la fila de la tabla hasta que el usuario haga clic en el botón "Guardar". Si el usuario hace clic en el botón "Cancelar", los datos de la tabla no se actualizarán.

Así es como se ve el cuadro de diálogo modal Editar libro:

Conclusión

Crear un diálogo modal para Angular desde cero no es fácil, pero es mucho más fácil con nuestra biblioteca de diálogo modal. Revisamos cómo configurar la biblioteca y usarla para mostrar cuadros de diálogo modales en su proyecto. Revisamos la mayoría de los casos de uso básicos y las características de los cuadros de diálogo, pero la biblioteca @developer-partners/ngx-modal-dialog tiene muchas otras características que pueden resultarle útiles en sus proyectos reales.

Por favor, siga el siguiente enlace para obtener más información al respecto:

@developer-partners/ngx-modal-dialog

En caso de que desee mostrar una buena ruleta de carga en sus cuadros de diálogo modales, consulte nuestro artículo sobre la creación de una ruleta de carga en Angular:

Cómo crear un Spinner de carga en Angular