Bdtjtk

JSON

[

  { position: 1, name: 'test', value: 1.0079, symbol: 'HHH' },

  { position: 2, name: 'test2', value: 4.0026, symbol: 'BBB' },

  { position: 3, name: 'test3', value: 6.941, symbol: 'BB' },

  { position: 4, name: 'test4', value: 9.0122, symbol: 'CC' },

]

TS

  isAllSelected() {

    const numSelected = this.selection.selected.length;

    const numRows = this.dataSource.data.length;

    return numSelected === numRows;

  }



  removeSelectedRows() {

     this.selection.selected.forEach(item => {

      let index: number = this.data.findIndex(d => d === item);

      console.log(this.data.findIndex(d => d === item));

      this.dataSource.data.splice(index,1);



      this.dataSource = new MatTableDataSource<Element>(this.dataSource.data);

      setTimeout(() => {

        this.dataSource.paginator = this.paginator;

      });

    });

    this.selection = new SelectionModel<Element>(true, );

  }



  /** 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));

  }

}

HTML

<div class="example-container mat-elevation-z8">



  <mat-table #table [dataSource]="dataSource">



    <!-- Checkbox Column -->

    <ng-container matColumnDef="actions">

      <mat-header-cell *matHeaderCellDef>

      </mat-header-cell>

      <mat-cell *matCellDef="let row">

        <button mat-icon-button color="#b71c1c">

                    <mat-icon aria-label="Delete">delete</mat-icon>

                  </button>

      </mat-cell>

    </ng-container>



    <!-- Position Column -->

    <ng-container matColumnDef="position">

      <mat-header-cell *matHeaderCellDef> No. </mat-header-cell>

      <mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>

    </ng-container>



     <!-- Weight Column -->

    <ng-container matColumnDef="value">

      <mat-header-cell *matHeaderCellDef> value </mat-header-cell>

      <mat-cell *matCellDef="let element"> {{element.value}} </mat-cell>

    </ng-container>



    <!-- Symbol Column -->

    <ng-container matColumnDef="symbol">

      <mat-header-cell *matHeaderCellDef> Symbol </mat-header-cell>

      <mat-cell *matCellDef="let element"> {{element.symbol}} </mat-cell>

    </ng-container>



    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>

    <mat-row *matRowDef="let row; columns: displayedColumns;"

             (click)="selection.toggle(row)">

    </mat-row>

  </mat-table>





</div>

i want to delete the entire row using one click button
Explanation -> when i click on delete button the entire row should get delete but here I'm doing API call for example when i delete any row it will send name to the API!

here it is my stackbliz demo -https://stackblitz.com/edit/delete-rows-mat-table-f5f7tr?file=app%2Ftable-selection-example.ts

It is always better to check for index != -1

removeSelectedRows(row) {

    let index = ELEMENT_DATA.findIndex(x => x.position == row.position);



    if (index != -1) {

      ELEMENT_DATA.splice(index, 1)

    }

    this.dataSource = new MatTableDataSource<Element>(ELEMENT_DATA);

}

You can try this:

HTML:

<!-- Checkbox Column -->

<ng-container matColumnDef="actions">

  <mat-header-cell *matHeaderCellDef> </mat-header-cell>

  <mat-cell *matCellDef="let row">

    <button mat-icon-button color="#b71c1c" (click)="removeSelectedRow(row)">

      <mat-icon aria-label="Delete">delete</mat-icon>

    </button>

  </mat-cell>

</ng-container>

TS:

removeSelectedRow(row) {

    //const index = this.data.findIndex(obj => obj === row);

    const index = this.data.findIndex(obj => obj.codeData == row.codeData);

    this.data.splice(index, 1);

    this.dataSource = new MatTableDataSource<Element>(this.dataSource.data);

}

StackBlitz HERE

Result:

add a function for deleting the row:

  deleteRow(row) {

    this.dataSource.data.splice(row.position-1, 1);

    this.dataSource =  new MatTableDataSource<Element>(this.dataSource.data);

  }

and in the HTML call this function when the delete button is clicked

<button (click)="deleteRow(row)" mat-icon-button color="#b71c1c">

      <mat-icon aria-label="Delete">delete</mat-icon>

</button>