Hay dos maneras de hacerlo.
En el método que abre el cuadro de diálogo, pase la siguiente opción de configuración disableClose
como segundo parámetro MatDialog#open()
y configúrelo en true
:
export class AppComponent {
constructor(private dialog: MatDialog){}
openDialog() {
this.dialog.open(DialogComponent, { disableClose: true });
}
}
Alternativamente, hágalo en el propio componente de diálogo.
export class DialogComponent {
constructor(private dialogRef: MatDialogRef<DialogComponent>){
dialogRef.disableClose = true;
}
}
Esto es lo que busca:
Y aquí hay una demostración de Stackblitz
Otros casos de uso
Aquí hay algunos otros casos de uso y fragmentos de código de cómo implementarlos.
Permitir esccerrar el cuadro de diálogo pero no permitir hacer clic en el fondo para cerrar el cuadro de diálogo
Como dijo @MarcBrazeau en el comentario debajo de mi respuesta, puede permitir que la escclave cierre el modal pero aún no permitir hacer clic fuera del modal. Utilice este código en su componente de diálogo:
import { Component, OnInit, HostListener } from '@angular/core';
import { MatDialogRef } from '@angular/material';
@Component({
selector: 'app-third-dialog',
templateUrl: './third-dialog.component.html'
})
export class ThirdDialogComponent {
constructor(private dialogRef: MatDialogRef<ThirdDialogComponent>) {
}
@HostListener('window:keyup.esc') onKeyUp() {
this.dialogRef.close();
}
}
Evita esccerrar el cuadro de diálogo pero permite hacer clic en el fondo para cerrar
PD: esta es una respuesta que se originó a partir de esta respuesta , donde la demostración se basó en esta respuesta.
Para evitar que la esctecla cierre el cuadro de diálogo pero permita que se cierre el clic en el fondo, he adaptado la respuesta de Marc, además de usar MatDialogRef#backdropClick
para escuchar eventos de clic en el fondo.
Inicialmente, el diálogo tendrá la opción de configuración disableClose
establecida como true
. Esto asegura que la esc
pulsación de la tecla, así como hacer clic en el fondo no hará que el diálogo se cierre.
Luego, suscríbase al MatDialogRef#backdropClick
método (que se emite cuando se hace clic en el fondo y regresa como a MouseEvent
).
De todos modos, suficiente charla técnica. Aquí está el código:
openDialog() {
let dialogRef = this.dialog.open(DialogComponent, { disableClose: true });
/*
Subscribe to events emitted when the backdrop is clicked
NOTE: Since we won't actually be using the `MouseEvent` event, we'll just use an underscore here
See https://stackoverflow.com/a/41086381 for more info
*/
dialogRef.backdropClick().subscribe(() => {
// Close the dialog
dialogRef.close();
})
// ...
}
Alternativamente, esto se puede hacer en el componente de diálogo:
export class DialogComponent {
constructor(private dialogRef: MatDialogRef<DialogComponent>) {
dialogRef.disableClose = true;
/*
Subscribe to events emitted when the backdrop is clicked
NOTE: Since we won't actually be using the `MouseEvent` event, we'll just use an underscore here
See https://stackoverflow.com/a/41086381 for more info
*/
dialogRef.backdropClick().subscribe(() => {
// Close the dialog
dialogRef.close();
})
}
}
@HostListener('window:keyup.esc') onKeyUp() { this.dialogRef.close(); }