Lo que quiero es que, cuando hago clic en el botón de la fila específica, debería abrir un cuadro de diálogo mat que debería mostrarme todo el contenido de la fila. Este es el archivo html ,
<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>Y este es mi archivo ts .
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); }Y este es mi archivo html del componente ( UserDetailsPopUp ) que se abrirá usando MatDialogue.
<h1>Hello{{u.name}}</h1>Pero no puedo enviar los datos de la fila desde la función de alternar a este componente. ¿Cómo puedo hacer eso? Y cargar esos datos y mostrarlos.
Envíe datos al componente de diálogo de esta manera:
toggle(userRow:any){ const dialogConfig = new MatDialogConfig(); dialogConfig.disableClose = false; dialogConfig.autoFocus = true; dialogConfig.width="60%"; dialogConfig.data = userRow; this.dialog.open(UserDetailsPopupComponent, dialogConfig); } y para capturar los datos en UserDetailsPopupComponent
constructor(@Inject(MAT_DIALOG_DATA) public _data: any) {} _data contiene los datos de userRow .