El uso de diálogos modales en   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   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. aplicaciones web Angular  1. Instalar la biblioteca  Tendremos que instalar nuestra biblioteca   a través de NPM e incluirla en nuestros módulos Angular para poder usarla. Aquí está el comando NPM para instalarlo: @developer-partners/ngx-modal-dialo  g   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   Typescript:  BookListComponent  Nuestra clase   utiliza una lista codificada de libros como datos para mostrar en nuestra tabla por simplicidad. También necesita el servicio   Angular de la biblioteca ngx-modal-dialog para poder mostrar los diálogos modales, por eso lo inyectamos en nuestro constructor. BookListComponent ModalService  A continuación, crearemos el archivo HTML para   donde mostraremos la lista de libros en una tabla HTML:  BookListComponent  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   en nuestra clase Typescript. La función   muestra el diálogo modal para agregar un nuevo libro a nuestra tabla. Este es el código mecanografiado de la función   :  createBook createBook createBook  La función   muestra el cuadro de diálogo modal llamando a la función   de la clase   . La función   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   , que es el primer parámetro de la función   en la captura de pantalla anterior. createBook show ModalService show CreateEditBookComponent de mostrar  El componente Angular   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:  CreateEditBookComponent  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   usa un servicio Angular llamado   del  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   en la captura de pantalla anterior. Llamamos a la función   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   . En la función   , cerramos el cuadro de diálogo modal al igual que en la función   , pero también le pasamos la propiedad del   que contiene los datos para agregar un nuevo libro a nuestra lista. CreateEditBookComponent ModalReference   ngx-modal-diálogo de cancelación cancelar saveData saveData cancelar libro  El servicio   es un tipo genérico. Cuando llamamos a la función   del servicio   , tenemos que pasar un objeto del mismo tipo que su parámetro genérico. En nuestro caso, es una interfaz Typescript llamada   . El parámetro que pasamos a la función   se devuelve al componente que creó el cuadro de diálogo modal llamando a la función   de la clase   .  ModalReference closeSuccess ModalReference Book closeSuccess show 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   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   para mostrarlo en la interfaz de usuario. newBook de libros  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   tiene casi el mismo código que la función   con solo una diferencia importante. Pasa el libro que queremos editar al diálogo modal usando la propiedad   de las opciones del diálogo.  editBook createBook modelo  El parámetro que pasamos al diálogo modal usando la propiedad   está disponible en el servicio   en el componente usado dentro del diálogo a través de su propiedad   .  del modelo ModalReference config.model  En la captura de pantalla anterior, estamos copiando el parámetro pasado y asignándolo a la propiedad del   del componente   . La propiedad del   del objeto   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. libro CreateEditBookComponent modelo ModalReference.config  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.  También publicado  aquí.  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

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.

Learn More

Este audio es producido en el idioma original de la historia!

Cómo mostrar un diálogo modal en Angular

About Author

COMENTARIOS

ETIQUETAS

ESTE ARTÍCULO FUE PRESENTADO EN

Related Stories

De los foros a los feeds: cómo los algoritmos de las redes sociales influyen en la interacción digital

Telegram: el puente de Crypto Island hacia el continente

Una guía del arquitecto para crear una arquitectura de referencia para un lago de datos de IA/ML

Crecimiento de las criptomonedas: creación de perfiles de usuarios eficaces

De los foros a los feeds: cómo los algoritmos de las redes sociales influyen en la interacción digital

Telegram: el puente de Crypto Island hacia el continente

Una guía del arquitecto para crear una arquitectura de referencia para un lago de datos de IA/ML

Crecimiento de las criptomonedas: creación de perfiles de usuarios eficaces

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps