Home > database >  Mat-Dialog passing value and populate to the input fields
Mat-Dialog passing value and populate to the input fields

Time:07-11

I was creating a mat-dialog with table and once i clicked the first row it will populate the input fields that you selected.

enter image description here

but i want to put only name

https://stackblitz.com/edit/mat-dialog-example-r2dch9

CodePudding user response:

I have forked your stackblitz sample.

First, modify this.dialogRef.close(row) to this.dialogRef.close(row.name).

alter-dialog.component.ts

this.dialogRef.close(row.name);

Next, modify app.component.ts as below.

app.component.ts

export class AppComponent {
  version = VERSION;
  value = '';                // Add this line.

  constructor(private dialog: MatDialog, private snackBar: MatSnackBar) {}

  openAlertDialog() {
    const dialogRef = this.dialog.open(AlertDialogComponent, {});

    dialogRef.afterClosed().subscribe((result) => {   // 
      this.value = result;                            // Add these lines.
    });                                               //
  }
}

Then add [(ngModel)]="value" into your <input type="text">

app.component.html

<input type="text" [(ngModel)]="value" />
  • Related