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.

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

Demasiado Largo; Para Leer

Making security fun one episode at a time

Cómo mostrar un diálogo modal en Angular

Demasiado Largo; Para Leer

Developer Partners

STORY’S CREDIBILITY

AI-assisted

Guide

Vested Interest

About Author

ETIQUETAS

Languages

ESTE ARTÍCULO FUE PRESENTADO EN...

Cómo mostrar un diálogo modal en Angular

Demasiado Largo; Para Leer

Developer Partners

STORY’S CREDIBILITY

AI-assisted

Guide

Vested Interest

About Author

ETIQUETAS

Languages

ESTE ARTÍCULO FUE PRESENTADO EN...

HISTORIAS RELACIONADAS