Angular Material: Popup Windows : Allow Windows to Go Between Front and Back

问题

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>

*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:

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

来源：https://stackoverflow.com/questions/62807800/angular-material-popup-windows-allow-windows-to-go-between-front-and-back

标签

angular