Angular Material Table row update with popup only 1st array values are coming in all edit rows

Question

created app with two components(A&B) with popup dialog on edit:

• Comp A Fetch the data from service and load to the data table

• Comb B initiates the data when pop event fired from A.

typically multiple records are load with array response into the table.

when pop is fired form data loaded correctly for record 1 for record 2 the same value of 1 is getting loaded instead of 2.

used MAT_DIALOG_DATA to import the table data to B Component.

a unique record to populate in form B

A_component.ts:

open() const dialogconfig = new MatDialogConfig(); 
dialogconfig.diableClose =true; 

this.dialog.open(BComoonent,
{ 
  data: this.datasource
});

BComponent.ts

constructor(@inject((MAT_DIALOG_DATA public) data:any;)

and HTML Code:

<input matInput placeholder="First Name " id="" name=" [ngModel]="data[0].empName">

Answer 1

The same value is displayed in the dialog because you are explicitly binding the input element value via ngModel to the first row of your data in this line:

<input matInput placeholder="First Name " id="" name=" [ngModel]="data[0].empName">

data[0].empName will always display the empName of the first record because you are directly accessing it via data[0].

What you should do instead is, passing only the row you want to edit and not the complete datasource.

In your component A you need to replace your datasource with the row the edit action was fired on:

this.dialog.open(BComponent,
{ 
  data: this.datasource // --> change this to the row you want to edit
});

And in your dialog you can then access the data without the index, as it is not an array e.g. not the complete datasource:

<input matInput placeholder="First Name " id="" name=" [ngModel]="data.empName">