How to bind a selected row data from the Mat-table in to popup input fields in angular using angular material

Question

I have implemented a sample angular app using angular material components.I have taken a simple table in my main page with employee details.

I need to select employee row and based on the selected row I need to bind the data in the popup.

can any body please help me how to access the selected row data in my popup .......?

please access my sample app here

Any help would be greatly appreciated....!

Marshal Marshal · Accepted Answer · 2018-11-05T13:22:06

You will need to inject the data into your dialog component using MAT_DIALOG_DATA... I can see this imported in your project so you seem to already be aware of this part, but may be a little confused on how to implement it... please see below.

You will also need to import inject

import {MAT_DIALOG_DATA, MatDialogRef, MatDialog } from '@angular/material/dialog';
import { Inject } from '@angular/core';

Then in your OpenPopup class constructor setup inject MAT_DIALOG_DATA like below.

Please note: Any data you pass into your dialog will need to be accessed using the data variable.

 export class OpenPopup {

  constructor(
    @Inject(MAT_DIALOG_DATA) public data: any,
    public dialogRef: MatDialogRef<OpenPopup> ) {

   }

Then in your openPopup() method in your TableComponent class pass the selected array into your dialog

let dialogRef = this.dialog.open(OpenPopup, {
      width: '600px', height: '400px',
      data: this.selection['_selected']
    });

Once inside of your dialog use it in the HTML like this.

Please Note: Because this example is passing the entire selected array to your dialog the example accesses the first select row statically via the [0] index. If you intend to pass multiple values to the dialog you will need to revise your html in the dialog to handle that... if you intend to only pass a single row then revise the data variable in your openPopup() method and only pass one there.

<h3>Update Row Data</h3><br/>
{{data | json}}



<!-- -------- INPUT FIELDS ----------  --> 
<div>
    <mat-input-container floatPlaceholder="never">  
        <input matInput placeholder="First Name "  id="" name="" [value]="data[0].empName">
    </mat-input-container>
</div>
<br/><br/>

<div>
    <mat-input-container floatPlaceholder="never">  
        <input matInput placeholder="Last Name "  id="" name="" [value]="data[0].empName">
    </mat-input-container>
</div>
<br/><br/>

<div>
    <mat-input-container floatPlaceholder="never">  
        <input matInput placeholder="Title "  name="" [value]="data[0].title">
    </mat-input-container>
</div>
<br/><br/>

<div>
    <mat-input-container floatPlaceholder="never">  
        <input matInput placeholder="Address "  name="" [value]="data[0].address">
    </mat-input-container>
</div>
<br/><br/>

How to bind a selected row data from the Mat-table in to popup input fields in angular using angular material

1 Answers