Блог

Вот мой пример кода. Пожалуйста, найдите мой рабочий пример кода здесь

Мне нужно установить треугольник в правом верхнем углу в mat-dialog box — 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 amp; 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;
    }
 

Я получаю вот так.

Но я хочу диалоговое окно с верхней стрелкой в каждой строке под событием нажатия кнопки запроса на изменение