Resumen: utilizar el componente MatDialog de Angular Material para mostrar un diálogo de confirmación, y de la misma manera ejemplificar cómo usar diálogos en Angular utilizando componentes y plantillas personalizadas.

Al final vamos a tener un ejemplo de un diálogo de confirmación con Material Design en donde podremos saber si el usuario hizo click en Sí o en No.

Mira el resultado final aquí.

Primeros pasos

Comienza por instalar la CLI de Angular si no la tienes. Después, crea un proyecto y agrega Material Design.

Una vez que cumplas esos pasos, comencemos.

Agregar componente de diálogo

El diálogo en sí es un componente así que vamos a crear el diálogo con:

ng g component dialogo-confirmacion

La vista del diálogo

El contenido HTML es el siguiente:

<h1 mat-dialog-title>Confirmación</h1>
<div mat-dialog-content>
    <p>{{mensaje}}</p>
</div>
<div mat-dialog-actions>
    <button mat-button (click)="cerrarDialogo()">No</button>
    <button mat-button (click)="confirmado()" cdkFocusInitial>Sí</button>
</div>

Ya desde la vista vemos de qué se trata. Tenemos el título que es estático; y un mensaje que será una propiedad pasada desde el componente que invoque al diálogo de Material Design.

También tenemos dos botones; uno que cierra el diálogo y otro que lo cierra pero indica que la acción fue confirmada. El atributo cdkFocusInitial es para que esté enfocado el botón y así el usuario pueda presionar Enter.

Programación de diálogo en Angular con TypeScript

Después vemos la lógica del componente:

import { Component, OnInit, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
@Component({
  selector: 'app-dialogo-confirmacion',
  templateUrl: './dialogo-confirmacion.component.html',
  styleUrls: ['./dialogo-confirmacion.component.css']
})
export class DialogoConfirmacionComponent implements OnInit {

  constructor(
    public dialogo: MatDialogRef<DialogoConfirmacionComponent>,
    @Inject(MAT_DIALOG_DATA) public mensaje: string) { }

    cerrarDialogo(): void {
      this.dialogo.close(false);
    }
    confirmado(): void {
      this.dialogo.close(true);
    }

  ngOnInit() {
  }

}

Comenzamos importando MatDialogRef y MAT_DIALOG_DATA. Estos componentes van a permitir tener una referencia al componente y permitir pasar datos desde otro lugar, respectivamente.

Aquí hay un punto importante, estamos inyectando datos de tipo string con @Inject; en este caso es una cadena, pero puedes pasar cualquier tipo de dato.

Después tenemos la referencia al diálogo como lo decía al principio. Es un MatDialogRef de tipo DialogoConfirmacionComponent (es decir, nos estamos refiriendo al mismo componente).

Finalmente tenemos los métodos. Ambos invocan al método close pero uno le pasa false y uno true. Esto indica si el usuario ha confirmado, o no.

Dependencia de componente

En app.module.ts importamos MatDialogModule así como nuestro componente.

Adicional a ello también necesitamos BrowserAnimationsModule (ya que hay animaciones en el diálogo) y MatButtonModule para los botones: tanto para mostrar el diálogo como para seleccionar una respuesta.

// Importar animaciones, los botones, el diálogo y el componente
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatDialogModule } from '@angular/material/dialog';
import { MatButtonModule } from '@angular/material/button';
import { DialogoConfirmacionComponent } from './dialogo-confirmacion/dialogo-confirmacion.component';

Después en imports colocamos los módulos y en entryComponentes (así como en declarations en caso de que no esté) indicamos el componente :

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    MatDialogModule, // <--- Aquí
    BrowserAnimationsModule, // <--- Aquí
    MatButtonModule, // <--- Aquí
  ],
  declarations: [
    AppComponent,
    HelloComponent,
    DialogoConfirmacionComponent,// <--- Aquí
  ],
  bootstrap: [AppComponent],
  entryComponents: [
    DialogoConfirmacionComponent// <--- Aquí
  ]
})

Eso es todo lo que necesitamos para configurar el diálogo. Es momento de usar esta confirmación con Angular Material.

Usando nuestro diálogo

En cualquier lugar en donde vayamos a usar el diálogo debemos importar MatDialog y nuestro componente de diálogo. En mi caso:

import { MatDialog } from '@angular/material/dialog';
import { DialogoConfirmacionComponent } from "./dialogo-confirmacion/dialogo-confirmacion.component"

Y en el constructor inyectar un diálogo de  tipo MatDialog. Así:

constructor(public dialogo: MatDialog) {}

Aquí viene la parte más importante. Encerramos el comportamiento en una función llamada mostrarDialogo. Después invocamos al método open de nuestro diálogo previamente inyectado.

El primer argumento es el componente, que en este caso es el que vimos anteriormente.

El segundo argumento son opciones entre ellas los datos, como dijimos que se recibe una cadena le pasamos justamente eso usando las backticks.

mostrarDialogo(): void {
  this.dialogo
    .open(DialogoConfirmacionComponent, {
      data: `¿Te gusta programar en TypeScript?`
    })
    .afterClosed()
    .subscribe((confirmado: Boolean) => {
      if (confirmado) {
        alert("¡A mí también!");
      } else {
        alert("Deberías probarlo, a mí me gusta :)");
      }
    });
}

Después nos suscribimos al cierre del diálogo; se nos pasará un booleano (si no sabes de dónde viene revisa el componente del diálogo) y con él podemos hacer cualquier cosa.

Ahora basta con llamar el método que muestra el diálogo, así:

<h1>Probando diálogo de confirmación</h1>
<button mat-raised-button mat-button color="warn" (click)="mostrarDialogo()">Mostrar diálogo</button>
<br>
<br>
<a mat-button color="primary" href="//parzibyte.me/blog">By Parzibyte</a>

Con el siguiente resultado:

Conclusión

Accede al ejemplo en este enlace, y aquí al código fuente en GitHub.

¿Más tutoriales de Angular? click aquí.