javascriptangulartypescriptmat-dialog

Material Dialog - update configuration (hasBackdrop) after open

It is possible to update the MatDialog configuration after open? I am trying to set the backdrop to true when the Dialog is opened and to false after some operations.

openDialog() {
    const config = new MatDialogConfig();
    config.hasBackdrop = true;
    config.date = 'Hello';

    this.dialog = this.matDialog.open(MaterialDialogComponent, config);
}

updateDialog() {
     this.dialog.updateSize('100px', '100px');
     this.dialog.updatePosition({right:'10%', bottom:'10%'});
     // how to update the hasBackdrop to false?
}

The documentation do not show any method to do this, also I do not see any other way to achieve this result.

Solution

  • You can get reference of backdrop element from private api

    const backdropElement = this.dialogRef['_ref'].overlayRef._backdropElement;

    and then change the style of this element. or you can use OverlayContainer service and query the backdrop element

    const backdropElement = this.overlayContainer.getContainerElement().querySelector('.cdk-overlay-backdrop')