CODEWITHSUNDEEP
angulartypescriptangular-materialangular8material-dialog
user13885958
user13885958

Reputation:

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

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.

enter image description here

Resource:

How can i make a MatDialog draggable / Angular Material

Update:

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

Upvotes: 0

Views: 1494

Answers (1)

Dewanshu
Dewanshu

Reputation: 534

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 => {

    });
  }

Upvotes: 1

Related Questions