Angular Material: Popup Windows : Allow Click in Original Window and Do Not Grey Out

Question

Trying to use Angular Material Dialog or Any Popup Window Component. Have it partially working.

Requirements:

a) Back original screen should Not be greyed out,

b) User allowed to click back in original first window behind it

c) Finally, want to send data back to original window Component. (this is working for us)

Simply it should be regular popup. How can this be done in Angular Material Dialog? It seems to be locking back screen.

public openAdvancedPropertySearchDialog(): void {
    const advancedApnSearchDialogRef = this.advancedApnSearchDialog.open(DocumentPropertyGridComponent, {
      width: '800px',
      height: '450px',
      disableClose: true,
      autoFocus: false,
      data: "test"
    });

    advancedApnSearchDialogRef.afterClosed().subscribe(result => {

    });
  }

We could use javascript window.open, however prefer Angular Material which offers full data binding communication service. If there is another Angular option, that can also work for answer.

Resource:

How can i make a MatDialog draggable / Angular Material

Update:

Currently testing hasBackdrop: false in Material Dialog, this may work as answer?

Answer 1

Try this. by adding a hasBackdrop true or false you can achieve what you want

public openAdvancedPropertySearchDialog(): void {
    const advancedApnSearchDialogRef = this.advancedApnSearchDialog.open(DocumentPropertyGridComponent, {
      width: '800px',
      height: '450px',
      disableClose: true,
      autoFocus: false,
      data: "test",
      hasBackdrop: false,
      
    });

    advancedApnSearchDialogRef.afterClosed().subscribe(result => {

    });
  }