Deleting Selected rows from mat-selection-list in angular 2 using angular material

Question

I have implemented a simple table in angular 2 using angular material ..Implemented two methods , first is transferSelectedRows which on selecting rows from table pushes the row data to Selected Rows section.

Second method is removeSelectedRows where on selecting the rows and clicking Remove Selected Rows button should delete the corresponding list items.But I am unable to implement the delete functionaltiy to splice the items from the mat-selection-list...

Can anybody please help me out ...!

please access my sample example here ..https://stackblitz.com/edit/angular-nwjqsj-au6ho8?file=app%2Faccount.component.scss

Below shown is the output of my sample angular 2 app.

And I am getting the following error in my terminal and console.

Answer 1

UPDATED:

You can do it even with a simple array since angular5. See here for a live example.

First bind your mat-selection-list to the array selectedRowsChecked in the html file.

<mat-selection-list #rows [(ngModel)]="selectedRowsChecked">
    <mat-list-option *ngFor="let i of selectedRows" [value]="i">
        {{i.position}}-{{i.name}}-{{i.weight}}-{{i.symbol}}
    </mat-list-option>
</mat-selection-list>

Then in your component define that array

selectedRowsChecked = [];

And then use this in your removeSelectedRows method.

removeSelectedRows() {
    this.selectedRowsChecked.forEach(item => {
      let index: number = this.selectedRows.findIndex(d => d === item);
      if(index > -1) {
         this.selectedRows.splice(index, 1);
      }
    });
    this.selectedRowsChecked = [];
}