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

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);