css - マットで動的なカスタム スタイルを作成する方法 - 各マット テーブル行のダイアログで、Angular で上の三角形を使用する - マテリアル

Question

これが私のサンプルコードです。 ここで私の作業サンプルコードを見つけてください

マットダイアログボックスの右上隅に三角形を設定する必要があります-Angular。

最後の行で静的 css を使用して、右上隅の三角形のダイアログ ボックスを取得しています。しかし、ここでは、変更要求ボタンのクリックで各行を取得できません。

以下のコードは、ダイアログボックスコンポーネント用です

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)
   }
  );
 }

以下のコードは 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;
    }

私はこのようになっています。

しかし、変更要求ボタンのクリックイベントの下の各行に上矢印のあるダイアログボックスが必要です