title: How can I set position of a dialog box under the button click event of each row in Mat table?
body: <p>Here is my sample code. <a href="https://stackblitz.com/edit/angular-ahbpn9?file=src%2Fapp%2Fpayments%2Fpayments.component.ts" rel="nofollow noreferrer">I created code here please see my working code here</a></p>
  <p>I tried to set up a position for a dialog box</p>
  <p><code> dialogConfig.position =  { top: '370px',left: '500px'}</code></p>
  <p>But for each row it's opening at the same position.
  <a href="https://i.stack.imgur.com/cw4NG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cw4NG.png" alt="enter image description here" /></a></p>
  <p>Here, I need to open a dialog box under each row on the Change Request button.</p>
  <p><a href="https://i.stack.imgur.com/QTPpR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QTPpR.png" alt="Sample - what is required" /></a>
  <a href="https://i.stack.imgur.com/Tokj0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Tokj0.png" alt="Sample - Wha ti srequired" /></a></p>
  <p>The below code is for the Dialog box</p>
  <pre><code>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 =&gt; {
      console.log(&quot;Dialog output:&quot;, data)
     
    }
  );
  </code></pre>
  <p>}</p>