web-dev-qa-db-ja.com

angular material（2.x +）]ダイアログをボタンのクリック時またはホバー時に画面の右側に配置する方法

私はangular 5マテリアルデザインで5を学び始めました。私の要件は、angularマテリアルダイアログを常に画面の右側に固定することです。デフォルトでは常に画面の中央に表示されますが、画面の右側にダイアログを表示するにはどうすればよいですか。

import { MatDialog, MatDialogRef, MAT_DIALOG_DATA, MatDialogConfig } from '@angular/material';

私のhtml：

<div class="add-contact-btn" fxFlex="10">
         <button mat-raised-button (click)="openDialog()">add contact</button>
     </div>

openDialog(): void {
const dialogRef = this.dialog.open(ContactsComponent, {
  width: '250px'   });
dialogRef.afterClosed().subscribe(result => {
  console.log('The dialog was closed');
});

}

angularangular5angular-material2
7
Shaik Habeeb

アプリにも同様の要件がありました。私はあなたのコードを再利用して、私がそれをどのようにしたかを示しました。このようにして、クリックした位置にダイアログを表示することができました。

HTML：

<div class="add-contact-btn" fxFlex="10">
     <button mat-raised-button (click)="openDialog($event)">add contact</button>
</div>

脚本：

openDialog(event): void {
  const dialogPosition: DialogPosition = {
    top: event.y + 'px',
    left: event.x + 'px'
  };

  const dialogRef = this.dialog.open(ContactsComponent, {
    width: '250px',
    position: dialogPosition
  });

  dialogRef.afterClosed().subscribe(result => {
    console.log('The dialog was closed');
  });
}
7
vipa

これを試して

const dialogRef = this.dialog.open(ContactsComponent, {
  width: '250px'
  position: { right: '0'}
});

トップを追加することもできます：0など。

4
Eray T