如何使用 MatDialog 将行数据或数组对象传递给 Angular 中的组件

Question

What I want is that, when I click on the specific row's button, it should open up a matDialog box which should display me all the contents of the row. This is the html file ,

                           <tr *ngFor="let u of users">
                                <td data-label="ID">{{u.name}}</td>
                                <td>
                                    <button (click)="toggle(u)" mat-button type="button" class="btn btn-primary">
                                        Show Details
                                    </button>
                                </td>
                            </tr>

And this is my ts file .

users = [
    {
      'name':'arjun'
    },
    {
      'name':'Karan'
    }
  ]


toggle(userRow:any){
    const dialogConfig = new MatDialogConfig();
    dialogConfig.disableClose = false;
    dialogConfig.autoFocus = true;
    dialogConfig.width="60%";
    this.dialog.open(UserDetailsPopupComponent, dialogConfig);
  }

And this is my html file of the component( UserDetailsPopUp ) that will open using MatDialogue.

<h1>Hello{{u.name}}</h1>

But I'm not able to send the row data from the toggle function to this component. How do I do that? And load that data and display it.

Answer 1

Send data to the dialog component like this:

toggle(userRow:any){
    const dialogConfig = new MatDialogConfig();
    dialogConfig.disableClose = false;
    dialogConfig.autoFocus = true;
    dialogConfig.width="60%";
    dialogConfig.data = userRow;
    this.dialog.open(UserDetailsPopupComponent, dialogConfig);
  }

and to catch the data in UserDetailsPopupComponent

constructor(@Inject(MAT_DIALOG_DATA) public _data: any) {}

_data contains the userRow data.