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.