Unable to properly swap data rows from one table to another in angular using angular material

Question

I have taken a sample data table using angular material with some data rows. I have also added an empty data table where I am transferring rows from first table to empty table.

I am able to properly move rows from first table into my second table. But when I am making a selectAll action , the rows are not getting selected.

But when I am trying to select one row at a time and clicking on Move to First Table Button , the row is getting deleted instead on getting transferred to first table.

Please access my sample app here

Answer 1

I just missed to make the selection for checkedDatasource...

Replace the code with this for All Rows Selection..

  /** Selects all rows if they are not all selected; otherwise clear selection. */
  masterToggle() {
    this.isAllSelected() ?
      this.selection.clear() :
      this.dataSource.data.forEach(row => this.selection.select(row));
    console.log(this.data);
  }

  masterCheckedToggle() {
    this.isAllCheckedSelected()?
      this.checkedSelection.clear() : 
      this.checkedDataSource.data.forEach(row => this.checkedSelection.select(row));
  }

Answer 2

You don't need the below code , It will remove the record from your first collection.

this.uncheckedData.splice(index, 1);

If you wan't to know the selected rows in later point , I would suggest set a IsSelected property

    this.selection.selected.forEach(item => {
          let index: number = this.uncheckedData.findIndex(d => d === item);
if(index){
          this.uncheckedData[index].IsSelected= true;
          this.checkedData.push(this.uncheckedData[index]);
          // this.uncheckedData.splice(index, 1);
}

        });