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.

Fussel · Accepted Answer · 2018-03-29 10:29:51Z

3

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 = [];
}

edited Mar 29, 2018 at 10:29

answered Mar 29, 2018 at 9:24

Fussel

1,8651 gold badge10 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Heena Over a year ago

yes i know .... I am able to display all the transferred rows in my console ..but unable to fetch the item selected...

Heena Over a year ago

If i fetch the selected item ... then its easy to splice that item

Fussel Over a year ago

You'll need a 2nd SelectionModel for the transfered rows so you can see which rows are selected on the right site.

Heena Over a year ago

i want to implement one more functionality where on selecting rows from table and clicking on transfer button .. i need to display the the same table with only the selected rows next to previous table

Fussel Over a year ago

Link - should be the same tho... maybe your browser has something still in cache.

|

Collectives™ on Stack Overflow

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

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

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

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

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

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

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related