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:

See the gist on github.

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:

See the gist on github.

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.

See the gist on github.

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

See the gist on github.

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:

See the gist on github.

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

See the gist on github.

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.

See the gist on github.

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í:

See the gist on github.

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í.