How to create dynamic custom style on mat -dialog on each mat-table row with top triangle in Angular - Material

Question

Here is my sample code. Please find my working sample code here

I need to set triangle on right top corner in mat-dialog box - Angular.

I am getting top right corner triangle dialog box using static css on last row. But here not able to get on each row on change request button click.

The below code is for the Dialog box Component

openDialog(Id, Currency, Amount, Reason, StatusDescription, payment, event) {

  let targetAttr = event.target.getBoundingClientRect();
const dialogConfig = new MatDialogConfig();

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

dialogConfig.data = {
  Id: Id,
  Reason: Reason,
  StatusDescription: StatusDescription
}; 
dialogConfig.position = {
  top: targetAttr.y + targetAttr.height + 10 + "px",
  left: targetAttr.x - targetAttr.width - 20 + "px"
};
  dialogConfig.panelClass = ['my-panel','arrow-top']; 

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

The Below code is from style.scss

/* Add application styles & imports to this file! */
 @import "~@angular/material/prebuilt-themes/indigo-pink.css";

 .my-panel {
    overflow: hidden !important;
    border-radius: 5px !important;
    padding: 0px !important;
    color: #fff;

 }
  .my-panel.arrow-top {
    margin-top: 40px;
  }
 .my-panel.arrow-top:after {
     content: " ";
     position: absolute;
     right: 100px;
     top: 365px;
     border-top: none;
     border-right: 15px solid transparent;
     border-left: 15px solid transparent;
     border-bottom: 15px solid gray;
    }

I am getting like this.

But I want dialog box with upper arrow on each row under change request button click event