Angular Material: Enable Window Dragging Across Multiple Monitors

Question

Angular Material: Enable Window Dragging Across Multiple Monitors

Exploring the usage of Angular Material Dialog or any other Popup Window Component. The functionality is mostly working as expected, with the exception of the last point.

a) The original screen should not have a grey overlay,

b) Users should be able to interact with the underlying first window,

c) Data should be sent back to the original window component,

d) There should be support for moving the modal/popup window to a second monitor screen with dual monitors. This feature is currently not functioning properly.

Ideally, it should behave like a standard popup window. How can this be achieved using 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 => {});
  }

While we could use javascript's window.open function, we prefer Angular Material due to its comprehensive data binding communication service. If there are other Angular options available, those would also be suitable solutions.

The basic flow involves a user clicking on Component 1: "Add Document", where the variable

selectedDocumentList: Array<string>

gets passed to Component 2:

cumulativeDocumentList: Array<string>

. The cumulative list should update in real-time, and we want to achieve this functionality using Angular Material Window Dialog.

(click picture to zoom in)
https://i.sstatic.net/dPrMc.png

Resource:

How can i make a MatDialog draggable / Angular Material

angular typescript angular-material angular8 material-dialog

Answer 1

Answer №1

Material Dialog is more than just a window - it's an HTML element that appears in a fixed position on the screen. Even if you try to make it draggable, it will only stay within the current tab of your browser. Using window.open might be a better solution.

IDEA:

You could create a route with a component that contains the Material Dialog and automatically opens it using the AfterViewInit hook.

For example, https://localhost:8443/dialogs/1 would be the route, and when you want to open the dialog in a new window, you can use the following code:

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

From the popup window itself, you can interact with the parent window like this:

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

Learn more about exposing Angular 2 methods publicly here.

Answer 2

Material Dialog is more than just a window - it's an HTML element that appears in a fixed position on the screen. Even if you try to make it draggable, it will only stay within the current tab of your browser. Using window.open might be a better solution.

IDEA:

You could create a route with a component that contains the Material Dialog and automatically opens it using the AfterViewInit hook.

For example, https://localhost:8443/dialogs/1 would be the route, and when you want to open the dialog in a new window, you can use the following code:

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

From the popup window itself, you can interact with the parent window like this:

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

Learn more about exposing Angular 2 methods publicly here.

Answer 3

Answer №2

It's not just a matter of simply dragging the component off the screen; there are additional complexities involved. One workaround could involve adding a button to the modal you wish to drag, which would then open up another browser tab with the component that can be dragged outside the window onto a separate screen. However, this solution does come with its own set of challenges - the component may need to be routed, possibly using a different router-outlet in order to maintain a different layout.

Best of luck!

Answer 4

It's not just a matter of simply dragging the component off the screen; there are additional complexities involved. One workaround could involve adding a button to the modal you wish to drag, which would then open up another browser tab with the component that can be dragged outside the window onto a separate screen. However, this solution does come with its own set of challenges - the component may need to be routed, possibly using a different router-outlet in order to maintain a different layout.

Best of luck!

Angular Material: Enable Window Dragging Across Multiple Monitors

Answer №1

Answer №2

Similar questions

Angular 5 facing issue with loading external scripts dynamically

Could I possibly incorporate @mui/material into an Angular project?

Discover the data type without using the extends keyword within an interface in Typescript

Error encountered: TypeScript module 'angularfire2/interfaces' not found in Ionic 3 with angularfire2-offline plugin

Frequent occurrence when a variable is utilized prior to being assigned

Challenge involving Angular for creating multiline innerHtml contentEditable feature

Issue with hydration in Next.js while trying to access the persisted "token" variable in Zustand and triggering a loading spinner

The young one emerges within the SecurePath component temporarily

Tips for remembering to reactivate the Protractor Angular synchronization feature

What is the internal mechanism used by Angular for routing implementation?

The hyperlink tag doesn't respond to clicks in Safari, yet functions properly in all other web browsers

Ways to usually connect forms in angular

Checking for Object Equality in TypeScript

Developing a calendar UI with similar features and functionality to Google Calendar using Ionic 2

Endure the class attribute in Angular 5

The utilization of *ngTemplateOutlet for conditional rendering is experiencing issues when used within a formGroup

Can ng-content be utilized within the app-root component?

Display on click within a nested array

Tips for effectively packaging the React 17 library alongside the latest JSX transformation feature as an ES Module

The Response Header for JWT in Angular2 Spring Boot is not appearing