Parent component should be active when angular material dialog is open

Question

I have implemented angular material dialog in my project , I also made the dialog draggable. Everything is working fine. Now I have a new requirement where I should keep parent component active when I open the dialog . Anyone have any idea on how to achieve this ?

Is there any way we can only enable part of the page and disable other part of the page? — navya

shajan shajan · Accepted Answer · 2020-08-07T16:54:46

you can add a class to disable the particular part based on the dialog.

In your component, you can add a variable to identify the dialog state.

openDialog(): void {
this.dialogActive = true;
const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
  width: '250px',
  data: {name: this.name, animal: this.animal},
  hasBackdrop: false
});

dialogRef.afterClosed().subscribe(result => {
  this.dialogActive = false;
  console.log('The dialog was closed');
  this.animal = result;
});

} }

and you can add a class to HTML based on the dialog state.

<div [class.modal-page-disable]="dialogActive"> disable part </div>
<div> enable part </div>

Then finally add the style to disable the part.

.modal-page-disable {
   pointer-events: none;
   background: transparent;
   opacity: 0.5;
}

you can refer the sample code here.

Parent component should be active when angular material dialog is open

1 Answers