CODEWITHSUNDEEP
angularangular-material
Heena
Heena

Reputation: 1773

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

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.

enter image description here

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

enter image description here

enter image description here

Upvotes: 3

Views: 4805

Answers (1)

Fussel
Fussel

Reputation: 1865

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

Upvotes: 3

Related Questions