-1

We have 1) Material Dialog Component Opening up 2) Another Material Dialog Component, when user press "Open Adv. Search" Button.

The first Dialog component is in fixed position. The second Dialog component is Movable, however cannot go behind first original one yet.

How to make it so, users can interchange the back or front positions of both windows, like typical Windows 10 desktop app, depending on what is clicked/drag/drop last?

Second Component:

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 => {});
  }

HTML Code for Second Component: which is Movable: First Component Dialog should be in fixed position ideally

<div mat-dialog-title cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle>
  <div class="row">
    <button class="dialog-button close-button" mat-button (click)="onCancel()">X</button>
  </div>
  <app-document-property-grid></app-document-property-grid>  
</div>

enter image description here

*If its only possible both components be movable with cdkDrag, rather than first Modal window being fixed, that can be accepted as answer .

Resource:

How can i make a MatDialog draggable / Angular Material

1 Answers1

2

This is an aproximate response, but perhafs can inspirated you

You can assing one "id" different for each MatDialog (and pass as element of the data)

const dialogRef = this.dialog.open(YourComponentDialog, {
      width: '250px',
      data: {data: test, id:'child'}, //<--this
      disableClose:true,
      hasBackdrop:false,
      id:'child' //<--this 

    });

If in constructor of the components you inject OverlayContainer

constructor(public cdk:OverlayContainer,...){}

You can create a function toTop that receive the "id"

  toTop(id)
  {
    this.cdk.getContainerElement().childNodes.forEach((x:any)=>{
      if (x.innerHTML.indexOf('id="'+id+'"')<=0)
        x.style["z-index"]=1000;
      else
        x.style["z-index"]=1001;
    })
  }

Just simply call to the function in (click) -you can call the funciton only if you click the title or in several places.

a stackblitz

NOTE: store in a variable if the parent open the child. so before open the child, check the variable and if is open simply send it to top

Eliseo
  • 50,109
  • 4
  • 29
  • 67
  • I think he can also use `(mousedown)` event. This will simulate desktop behavior better – yurzui Jul 09 '20 at 12:10
  • 1
    just corrected, thanks yurzui !!, futhermore I call in ngOnInit of child to the function toTop to sure the child, when appear, appears always on top – Eliseo Jul 09 '20 at 12:29
  • thanks, I will try this out, wish Angular Material had a simple parameter back/front, without using these functions, https://material.angular.io/components/dialog/api –  Jul 09 '20 at 16:26
  • hi @Eliseo thanks, do you know the answer to this one? https://stackoverflow.com/questions/62824591/angular-material-popup-windows-allow-window-move-to-second-monitor-screen –  Jul 09 '20 at 22:24
  • @AlanSmith5482, About the "greyed out", it's only use `backdropClass`: https://material.angular.io/components/dialog/api#MatDialogConfig. If you defined a class like:`.backdrop-transparent{background-color:transparent}`, when open the window, you can add `backdropClass:'backdrop-transparent'` -don't forget include the class in the two components that open the child, – Eliseo Jul 10 '20 at 06:36