Existem duas maneiras de fazer isso.
No método que abre a caixa de diálogo, passe a seguinte opção de configuração disableClose
como o segundo parâmetro MatDialog#open()
e defina-a como true
:
export class AppComponent {
constructor(private dialog: MatDialog){}
openDialog() {
this.dialog.open(DialogComponent, { disableClose: true });
}
}
Como alternativa, faça isso no próprio componente de diálogo.
export class DialogComponent {
constructor(private dialogRef: MatDialogRef<DialogComponent>){
dialogRef.disableClose = true;
}
}
Aqui está o que você está procurando:
E aqui está uma demonstração Stackblitz
Outros casos de uso
Aqui estão alguns outros casos de uso e trechos de código de como implementá-los.
Permite escfechar a caixa de diálogo, mas não permite clicar no pano de fundo para fechar a caixa de diálogo
Como @MarcBrazeau disse no comentário abaixo da minha resposta, você pode permitir que a esctecla feche o modal, mas ainda não permite clicar fora do modal. Use este código em seu 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();
}
}
Impedir escde fechar a caixa de diálogo, mas permitir clicar no pano de fundo para fechar
PS Esta é uma resposta que teve origem nesta resposta , onde a demonstração foi baseada nesta resposta.
Para evitar que a esctecla feche a caixa de diálogo, mas permitir o clique no pano de fundo para fechar, adaptei a resposta de Marc, além de usar MatDialogRef#backdropClick
para ouvir eventos de clique no pano de fundo.
Inicialmente, a caixa de diálogo terá a opção de configuração disableClose
definida como true
. Isso garante que o esc
pressionamento de tecla, bem como o clique na tela de fundo, não farão com que a caixa de diálogo feche.
Depois, inscreva-se no MatDialogRef#backdropClick
método (que é emitido quando a tela de fundo é clicada e retorna como a MouseEvent
).
De qualquer forma, chega de conversa técnica. Aqui está o 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, isso pode ser feito no 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(); }