My goal is to create a functionality where clicking on a button within a specific row opens up a matDialog box displaying all the contents of that row. Below is the HTML snippet:
<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>
Here is the TypeScript code:
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);
}
Below is the HTML file for the component (UserDetailsPopUp) that will open using MatDialogue:
<h1>Hello {{u.name}}</h1>I am facing an issue in passing row data from the toggle function to this component. How can I achieve this and display the data successfully?