Post Top Ad

Your Ad Spot

domingo, 28 de junio de 2020

Cree un diálogo de confirmación reutilizable en Angular 7, utilizando material angular

Tener un diálogo de confirmación es un requisito muy común en las aplicaciones hoy en día. Se usan cuando se ejecuta una acción específica (en la mayoría de los casos destructiva), como eliminar un registro específico.
No queremos que los usuarios de nuestra aplicación eliminen algo por error. Es por eso que cuando se hace clic en un botón Eliminar, aparece un cuadro de diálogo con un mensaje de confirmación y dos botones: uno para confirmar la acción (continuar con la eliminación) y otro para detener la eliminación.
En este artículo, aprenderá cómo implementar un diálogo de confirmación reutilizable en Angular 7 , utilizando material angular . Implementaremos el cuadro de diálogo como un nuevo componente compartido, que estará disponible para ser llamado desde los otros componentes (cuando sea necesario). Extraerlo como un componente separado nos permitirá tener la plantilla de nuestro cuadro de confirmación y parte de la lógica de interacción en un solo lugar en lugar de repetir el código en toda nuestra aplicación.
Entonces, aquí está mi plan de implementación:
  1. Crear un nuevo proyecto angular (versión 7)
  2. Instale Angular Material y configúrelo (importe los módulos que necesitaremos)
  3. Crear el componente de diálogo de confirmación reutilizable
  4. Pruebe nuestra solución para los casos "Sí" y "No"

Crear un nuevo proyecto angular (versión 7)

Como probablemente ya sepa, crear un proyecto usando @ angular / cli es realmente fácil.
  1. ng nueva aplicación angular
En el momento de escribir esto (04/03/2019), el Cli me hizo dos preguntas:
¿Desea agregar enrutamiento angular? No
¿Qué formato de hoja de estilo te gustaría usar? CSS
Iremos sin enrutamiento y formato de hoja de estilo - css. No se preocupe si ha elegido un estilo diferente, lo usaremos solo para importar nuestro tema de material angular.

Instale Angular Material y configúrelo (importe los módulos que necesitaremos)

Use el siguiente comando para instalar Angular Material, Angular CDK y Angular Animation (el paquete de material angular requiere los dos últimos para que funcione como se espera)
  1. npm install --save @ angular / material @ angular / cdk @ angular / animaciones
Cuando se instalan los paquetes, podemos importar las dependencias que usaremos : BrowserAnimationsModule , MatDialogModule y MatButtonModule
  1. importar { MatDialogModule } desde '@ angular / material / dialog' ;
  2. importar { MatButtonModule } desde '@ angular / material / button' ;
  3. importar { BrowserAnimationsModule } desde '@ angular / platform-browser / animations' ;
E inclúyalo en la matriz de importaciones (también en app.module.ts):
  1. importaciones: [
  2. BrowserModule,
  3. BrowserAnimationsModule,
  4. MatDialogModule,
  5. MatButtonModule
  6. ]
Una pequeña aclaración - los BrowserAnimations es requerido por angular de materiales , MatButton será utilizada sólo para fines peinar, tanto en nuestro módulo de diálogo y la aplicación y el más importante - MatDialog , nos ayudará a manejar el diálogo en sí.
Y el último paso obligatorio es incluir nuestro tema.
Decidí usar el deeppurple-amber importándolo en styles.css (el archivo de estilos global)
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
Nota: Importar los estilos de un tema específico es imprescindible. No omita esto, de lo contrario faltarán algunos de los estilos de material.

Crear el componente de diálogo de confirmación reutilizable

Cree un nuevo componente con el diálogo de confirmación de nombre utilizando el siguiente comando:
  1. ng componentes gc / compartido / diálogo de confirmación
Esto creará el componente de diálogo en una carpeta 'compartida' y lo incluirá en la matriz de declaraciones app.module.ts .
Una cosa importante a considerar aquí es que el módulo MatDialog crea instancias de componentes en tiempo de ejecución. Debido a eso, Angular necesitará información adicional de nuestra parte. Para cualquier componente cargado en un cuadro de diálogo, la clase de componente (en nuestro caso ConfirmationDialogComponent ) debe incluirse en la lista de componentes de entrada en nuestra definición de NgModule . ( App.module.ts )
La versión final de app.module.ts debería ser:
  1. importar { BrowserModule } desde '@ angular / platform-browser' ;
  2. importar { NgModule } desde '@ angular / core' ;
  3. importar { MatDialogModule } desde '@ angular / material / dialog' ;
  4. importar { BrowserAnimationsModule } desde '@ angular / platform-browser / animations' ;
  5. importar { MatButtonModule } desde '@ angular / material / button' ;
  6. importar { AppComponent } desde './app.component' ;
  7. importar { ConfirmationDialogComponent } desde './components/shared/confirmation-dialog/confirmation-dialog.component' ;
  8. @ NgModule ( {
  9. declaraciones: [
  10. AppComponent,
  11. ConfirmationDialogComponent
  12. ] ,
  13. importaciones: [
  14. BrowserModule,
  15. BrowserAnimationsModule,
  16. MatDialogModule,
  17. MatButtonModule
  18. ] ,
  19. entryComponents: [
  20. ConfirmationDialogComponent
  21. ] ,
  22. proveedores: [ ] ,
  23. bootstrap: [ componente de la aplicación ]
  24. } )
  25. clase de exportación AppModule { }
Después de estas configuraciones, es hora de llenar el componente con algún código.
Incluya el siguiente código en confirm-dialog.component.html
  1. <div mat-dialog-content>
  2. { { mensaje } }
  3. </div>
  4. <div mat-dialog-actions>
  5. <button mat- button ( click ) = "onNoClick ()" > No </button>
  6. <button mat-button [ mat-dialog-close ] = "true" cdkFocusInitial> Sí </button>
  7. </div>
Esta será nuestra plantilla de diálogo. Nada lujoso ya que este no es el propósito de este tutorial.
Básicamente, el contenido del diálogo se divide en dos partes:
El primero es el mensaje de confirmación (que recibiremos como parámetro del componente que abre el diálogo) y el siguiente es la barra de acciones. Las acciones son "Sí" y "No". Cuando se hace clic en el botón "No", simplemente cerrará el cuadro de diálogo.
En caso de que se haga clic en "Sí", se emitirá un parámetro verdadero a todos los que se hayan suscrito al método afterClosed () de dialogRef . El paso del valor "verdadero" se realiza mediante [mat-dialog-close] = "verdadero".
Nos suscribimos a este método en el componente que abre el cuadro de diálogo que trataremos en el siguiente paso.
Para finalizar con la configuración del componente, debemos incluir el siguiente código en confirm-dialog.component.ts
  1. import { Component, Inject } de '@ angular / core' ;
  2. importar { MatDialogRef, MAT_DIALOG_DATA } desde '@ angular / material' ;
  3. @ Componente ( {
  4. selector: 'diálogo-confirmación-aplicación' ,
  5. templateUrl: './confirmation-dialog.component.html' ,
  6. styleUrls: [ './confirmation-dialog.component.css' ]
  7. } )
  8. export class ConfirmationDialogComponent {
  9. constructor (
  10. public dialogRef: MatDialogRef <ConfirmationDialogComponent>,
  11. @ Inject ( MAT_DIALOG_DATA ) mensaje público: cadena ) { }
  12. onNoClick ( ) : void {
  13. this.dialogRef. cerrar ( ) ;
  14. }
  15. }
El método del constructor está haciendo dos cosas: recibe la referencia al diálogo que estamos abriendo actualmente e inyecta el mensaje que debe mostrarse en este diálogo. Ambos son pasados ​​por el componente, que está abriendo el diálogo.
Además del constructor, también estamos implementando un método simple onNoClick que maneja el clic del botón "No". Solo está haciendo una cosa: cerrar el diálogo llamando al método close (), proporcionado por Angular Material.
Phew 🙂Eso es todo, continuemos con detalles sobre cómo usar este componente de otros componentes en nuestra aplicación.

Pruebe nuestra solución para los casos "Sí" y "No"

Usar el componente que creamos hace unos segundos no es una ciencia espacial, pero tiene algunos detalles que necesitamos saber.
Cambiemos app.component.html a lo siguiente:
  1. <button mat- button ( click ) = "openDialog ()" > Confirmar cuadro </button>
Utilizaremos este botón para activar el método openDialog , que abrirá el cuadro de diálogo de confirmación utilizando nuestro componente creado anteriormente.
Aquí está el código que necesitamos en app.component.ts
  1. importar { Componente } desde '@ angular / core' ;
  2. importar { MatDialog } desde '@ angular / material' ;
  3. importar { ConfirmationDialogComponent } desde './components/shared/confirmation-dialog/confirmation-dialog.component' ;
  4. @ Componente ( {
  5. selector: 'raíz de la aplicación' ,
  6. templateUrl: './app.component.html' ,
  7. styleUrls: [ './app.component.css' ]
  8. } )
  9. clase de exportación AppComponent {
  10. title = 'diálogo-confirmación-angular' ;
  11. constructor ( diálogo público: MatDialog ) { }
  12. openDialog ( ) : void {
  13. const dialogRef = this.dialog. abierto ( ConfirmationDialogComponent, {
  14. ancho: '350px' ,
  15. data: "¿Confirma la eliminación de estos datos?"
  16. } ) ;
  17. dialogRef. afterClosed ( ) . suscribirse ( resultado => {
  18. if ( resultado ) {
  19. consola. log ( 'Sí hizo clic' ) ;
  20. // HACER ALGO
  21. }
  22. } ) ;
  23. }
  24. }
Al importar el MatDialog en nuestro componente, podemos abrir el diálogo (o más de uno) simplemente usando el método .open que nos entrega Angular Material . Este método tiene un parámetro obligatorio: el componente que se cargará en el cuadro de diálogo. En nuestro caso, estamos pasando el ConfirmationDialogComponent creado en el capítulo anterior. El segundo parámetro es opcional y representa el objeto de configuración. En el ejemplo anterior, lo estamos utilizando para pasar el ancho del cuadro de diálogo y los datos, que representa el mensaje de confirmación. En lugar de una cadena, una práctica común es pasar un objeto con diferentes datos allí (puede pasar el título y el mensaje o lo que necesite en su componente para que se muestre).
El método de apertura en sí mismo devuelve una instancia de MatDialogRef . El MatDialogRef ofrece una manija en el cuadro de diálogo abierto. Este controlador se puede utilizar para cerrar el cuadro de diálogo mediante programación o para suscribirse y recibir una notificación cuando se cierra el cuadro de diálogo.
En nuestro método openDialog , estamos utilizando el último: suscribirse y esperar a que se cierre nuestro diálogo. Según nuestra configuración (verifique la parte 3), cuando se hace clic en el botón "Sí", se pasará un valor verdadero a este controlador. En caso de "No", no habrá valor, es decir, indefinido.
En ambos casos (si se hizo clic o no) , se ejecutará el controlador afterClosed , es por eso que estamos usando una instrucción if para verificar si el resultado es verdadero. Si es así, podemos continuar con la acción: eliminar algo o lo que sea que tengamos que hacer.
Y en realidad, hemos terminado.
Para verificar si todo funciona como se esperaba, inicie el proyecto:
  1. ng servir
Debería poder ver un botón Confirmar cuadro. Cuando hace clic en él, debe aparecer el cuadro de diálogo:
Podrá cerrarlo haciendo clic en los botones No ,  o fuera del cuadro de diálogo.
Espero que disfrutes este tutorial.
Puede ver el código completo aquí: https://github.com/vikobg/first-class-js/tree/master/angular-confirmation-dialog
Y un ejemplo de trabajo aquí: https://firstclassjs.com/tutorials/angular-confirmation-dialog/
¡Buena suerte!

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas