How can I set position of a dialog box under the button click event of each row in Mat table?

Question

Here is my sample code. I created code here please see my working code here

I tried to set up a position for a dialog box

dialogConfig.position = { top: '370px',left: '500px'}

But for each row it's opening at the same position.

Here, I need to open a dialog box under each row on the Change Request button.

The below code is for the Dialog box

openDialog(Id, Currency, Amount, Reason, StatusDescription, payment) {
const dialogConfig = new MatDialogConfig();

dialogConfig.disableClose = true;
dialogConfig.autoFocus = true;

dialogConfig.data = {
  Id: Id,
  Reason: Reason,
  StatusDescription: StatusDescription
};
 dialogConfig.position =  {
    top: '370px',
    left: '500px'
  }


const dialogRef = this.dialog.open(EditingDialogComponent, dialogConfig);
dialogRef.afterClosed().subscribe(
  data => {
    console.log("Dialog output:", data)
   
  }
);

}

Answer 1

I am assuming you want to show the dialog box right below the button which opens it. This can be done by positioning the dialog with the coordinates of button.

We can do this by using the event argument supplied with event listeners. Simply add $event at the beginning of the openDialog function call in the view file and add event argument in the function definition for openDialog. We can get the relative viewport position of the element by using event.target.getBoundingClientRect() .This would have the x,y coordinates of the target element(button in our case) along with the width and height. You can use the x and y coordinates as the values for dialog config.

This has been done in the below URL

https://stackblitz.com/edit/angular-zw5byw?file=src/app/payments/payments.component.ts

I have used the width and height attributes( and also some constants) to move the dialog around the button. Feel free to adjust it according to your need