Angular Material: Popup Windows : Allow Window Move to Second Monitor Screen

Question

Trying to use Angular Material Dialog or Any Popup Window Component. Have following working, except last topic.

a) Back original screen should Not be greyed out,

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

c) Send data back to original window Component.

d) Allow user to move modal/popup window to Second Monitor Screen, dual monitors. This is not working.

Simply it should be regular popup. How can this be done in Angular Material Dialog?

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

    propertySearchDialogRef.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.

Basically user presses Component 1: "Add Document" variable: selectedDocumentList: Array<string>, and data sent Arrow Component 2: cumulativeDocumentList: Arrays<string> . Cumulative list gets updated in real time. Have it working with Material Window Dialog.

(click picture to zoom in)

Resource:

How can i make a MatDialog draggable / Angular Material

Eric Aska · Accepted Answer · 2020-07-09T23:37:15.233

1

Material Dialog is not a window. it's just html element that pops up in absolute position and even if you make it draggable ,it's only for current window and wont go outside of current tab. window.open might be the way to go.

IDEA:

It is possible to create a route with a component which just includes Material Dialog and opens it on AfterViewInit hook.

like https://localhost:8443/dialogs/1 route and

when you need to open the dialog in new window you would call

  open() {
    const myWindow = window.open(
      'https://localhost:8443/dialogs/1',
      '_blank',
      'width=200, height=100'
    );
  }

and from popup window inside

  onNoClick(data: string): void {
    this.dialogRef.close();
    console.log(window.opener);
    const parent = window.opener;
    // But is it possible to pass data to parent and make a change?
    // window.close();
  }

How to expose angular 2 methods publicly?

edited Jul 09 '20 at 23:37

answered Jul 09 '20 at 22:35

Eric Aska

611
5
14

ok, question is asking for solution using Angular and two way communication binding, does Angular have any library options? thanks – Jul 09 '20 at 22:37
2

That requirement makes things very complicated. If this is a hard requirement, you might have to ask yourself if a browser app is the way to go. There is a no easy answer. – MikeOne Jul 09 '20 at 22:47
hi @MikeOne I'm sure people have this topic in Angular lot, not sure what best way to communicate between dialogs or windows are, open to any Angular solution if Angular material does not work – Jul 09 '20 at 22:55
Well the only way that I can think of is to make it work is that you open the MatDialog in a new window and when dialog is gets closed, it closes the pop up and passes the data to parent and closes the window. but problem is that how we get the instance of our component from window object. – Eric Aska Jul 09 '20 at 23:05
Problem is, this is not simply ‘communication with a dialog’. You’ll need comms between 2 browser instances (and probably 2 way comms as well). This involves a completely separate second application (the thing that runs in the other window) - and a 2-way comms channel. It’s not impossible, but very complicated. You could have a look at postMessage or do the comms through an API/socket. However you solve it, it’s complex. – MikeOne Jul 09 '20 at 23:05
1

maybe Broadcast channel or localStorage? – Jul 09 '20 at 23:18

score 0 · Answer 2 · answered Jul 09 '20 at 23:11

In fact, it is not as simple as just dragging the component out of the screen. A possible walkaround would be to add a button to the modal that you want to drag and make this button open some component in a different browser-tab that you could drag outside the window into a different screen. This would introduce a few challenges though, for example, this component needs to be routed, possibly using a different router-outlet since you want to use a different layout.

Good luck

Angular Material: Popup Windows : Allow Window Move to Second Monitor Screen

2 Answers2

Linked