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

Question

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

The first Dialog component

Answer 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