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

Answer 1

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

Answer 2

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?