How to pass data to Angular Material Dialog (Angular 14.1)?

Question

I checked this link but I could not solve my problem.

I have a table on my page. When I double click each row, an Angular Materia Dialog is shown and the corresponding row data are loaded to that dialog. The followings are variable in the main ts file:

eqId: string = '';

onDoubleClick(e: any): void {
    this.eqId = e.rowData["EquipmentId"];
    this.openDialog();
  }
openDialog() {
    const dialogRef = this.dialog.open(EquipmentDetailComponent);

    dialogRef.afterClosed().subscribe(result => {
      console.log(`Dialog result: ${result}`);
    });
}

The EquipmentDetailComponent's ts file is:

@Input() eqId: string = '';

But when I run, eqId is empty in the dialog. How can I pass data to Angular Material Dialog?

https://material.angular.io/components/dialog/overview#sharing-data-with-the-dialog-component — Andrew Allen, Aug 18 '22 at 10:10

score 0 · Accepted Answer · answered Aug 18 '22 at 10:09

You can pass any data by providing a second parameter in the this.dialog.open() method like this:

eqId: string = '';

onDoubleClick(e: any): void {
    this.eqId = e.rowData["EquipmentId"];
    this.openDialog();
  }
openDialog() {
    const dialogRef = this.dialog.open(EquipmentDetailComponent,
        {eqId: this.eqId}
    );
 
    dialogRef.afterClosed().subscribe(result => {
      console.log(`Dialog result: ${result}`);
    });
}

In the EquipmentDetailComponent you should inject MAT_DIALOG_DATA like this:

export class EquipmentDetailComponent {
...
  constructor(@Optional() @Inject(MAT_DIALOG_DATA) public data: {eqId: string}){
    //you can get an access to passed value like this
    console.log(this.data.eqId);
  }
...
}

How to pass data to Angular Material Dialog (Angular 14.1)?

1 Answers1