Transferring selected rows between tables in angular 2 using angular material

Question

I have implemented a simple table in angular 2 using the angular material.

I have implemented transferring selected rows functionality from the first table to the second table and deleting the selected rows from the second table.

As I select rows from the first table and click on button Move To Second Table , the selected rows are transferred to the second table but are not getting spliced from the first table, although I have spliced the selected rows in the transferSelectedRows() method.

please access my sample app here...

you don't splice it from the table, you do splice it from selection... — smnbbrv
yes i spliced from selection ,,, but not getting spliced.....! — Heena

Vivek Doshi Vivek Doshi · Accepted Answer · 2018-03-29T13:08:07

Here are the changes you need to do in your component side (Please also read the comments)

Component Side :

uncheckedData = this.data; // to maintain data for table 1

transferSelectedRows() {
    this.selection.selected.forEach(item => {
        let index: number = this.uncheckedData.findIndex(d => d === item);

        this.checkedData.push(this.uncheckedData[index]); // adding to table 2
        this.uncheckedData.splice(index,1); // remove data from table 1

    });

    this.selection = new SelectionModel<Element>(true, []);
    this.dataSource = new MatTableDataSource<Element>(this.uncheckedData);
    this.checkedDataSource = new MatTableDataSource<Element>(this.checkedData);
    this.dataSource.paginator = this.paginator;
    this.checkedDataSource.paginator = this.checkedpaginator;
}

WORKING DEMO

Transferring selected rows between tables in angular 2 using angular material

1 Answers