Transferring row data from between two tables in angular using angular material

0
votes

I have created a sample angular app where I have taken TableComponent as my main page and also I have a popup in the TableComponent.

When I click on the OpenPopup button in my main page I get a Popup window with two tables.

The first table has a list of data rows and my second table is empty. When I transfer the rows from my first table to second table and click on save button ,the data rows from second table is displayed on the main page table.

But my issue is when I am opening the popup for the second time , the second table is not showing the earlier selected rows and is empty.

Please access my sample app here..

can anybody please suggest me what I am missing here...?

1
angularangular-material
May be you have cleared you alue while open the popup – Ramesh Rajendran
not I havent cleared.. – Heena
Please see my revised answer with solution. – Marshal

1 Answers

1
votes

ELEMENT_DATA is a CONST outside of the scope of class OpenPopup, this is why when you complete the splice this.checkedData.splice(index,1) you are essentially mutating or modifying the data in the ELEMENT_DATA const and it is maintaining the state.

class OpenPopup gets instantiated everytime you open the popup and because your are doing the following you are re-initializing the checkedDataSource as [] when the popup opens. 

 checkedData = [];
 checkedDataSource = new MatTableDataSource<Element>(this.checkedData);

Revision:

You will need to replicate ELEMENT_DATA for checkedData.

  • Adding the following to your stackblitz example works.

    const ELEMENT_DATA: Element[] = [
{ position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H' },
{ position: 2, name: 'Helium', weight: 4.0026, symbol: 'He' },
{ position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li' },
{ position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be' },
{ position: 5, name: 'Boron', weight: 10.811, symbol: 'B' }
];

const CHECKED_DATA: Element[] = [];

Then in your OpenPopup class

checkedData = Object.assign(CHECKED_DATA);