How to bind data from popup to parent page in angular using angular material

Question

I have implemented a sample angular app with two data tables in the popup. where I have implements swapping data rows form one table to another.

I have take a save button in the popup page where i need to bind the data table from popup to parent page on clicking save button.

But when I am trying to fetch data in my console from saveToParentPage() function ,I am unable to fetch the data from the second table in my console.

please access my sample app here

Can anybody help me how can I fetch data from the popup and display the second table from popup in my parent page.?

Answer 1

If I understand your problem correctly, I believe you are printing out the wrong variable.

saveToParentPage (){
   console.log(this.checkedDataSource.data);
}

In order to pass the data to the parent component, you would need to pass it through the dialogRef.close MatDialogRef

saveToParentPage (){
    this.dialogRef.close(this.checkedDataSource.data);
}

You would receive it at the parent using the afterClosed observable,

dialogRef.afterClosed().subscribe(result => {
    console.log('from the parent component', result);
});

Hope this helps. stackblitz