CODEWITHSUNDEEP
angularmat-table
JustCode
JustCode

Reputation: 681

How to delete particular row from angular material table which doesnt have filters?

My samplepage.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-batchticketvalidation',
  templateUrl: './batchticketvalidation.component.html',
  styleUrls: ['./batchticketvalidation.component.css']
})
export class BatchticketvalidationComponent {

  constructor() { }

  displayedColumns = ['id', 'ticketnumb', 'actionsColumn'];
  dataSource: PeriodicElement[] = ELEMENT_DATA;
  private myDataArray: any;

  deleteTicket(rowid: number) {
    if (rowid > -1) {
      this.myDataArray.splice(rowid, 1);
    }
  }
}

export interface PeriodicElement {
  id: number;
  ticketnumb: string;
  actionsColumn: any;
}

const ELEMENT_DATA: PeriodicElement[] = [
];

My samplepage.component.html

<table mat-table [dataSource]="myDataArray" >
   <!-- <ng-container [matColumnDef]="column" *ngFor="let column of displayedColumns" >
      <th mat-header-cell *matHeaderCellDef > {{column}} </th>
      <td mat-cell *matCellDef="let element" > {{element[column]}} </td>
      </ng-container> -->

   <ng-container matColumnDef="id">
      <th mat-header-cell *matHeaderCellDef> Id. </th>
      <td mat-cell *matCellDef="let element; let i = index;"> {{i+1}} </td>
   </ng-container>

   <ng-container matColumnDef="ticketnumb">
      <th mat-header-cell *matHeaderCellDef> Ticket Number </th>
      <td mat-cell *matCellDef="let element"> {{element.ticketnumb}} </td>
   </ng-container>

   <ng-container matColumnDef="actionsColumn">
      <th mat-header-cell *matHeaderCellDef> Action </th>
      <td mat-cell *matCellDef="let element;  let j = index;"> 
         <button mat-raised-button  color="warn" focusable="false" (click)="deleteTicket(j)">
         <i class="fa fa-times mat-icon"></i> Remove
         </button>
      </td>
   </ng-container>

   <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
   <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

I am new to angular. I need help in removing particular row from the table and once the row is removed the table should get refresh or it should show the existing data. I have only static rows. This is just a plain mockup html that i want to show to the client.

Each row has delete button and on click of delete button I am calling deleteTicket(rowid).

When deleteTicket method is triggered, the row is not removed from Ui, but when i console this.myDataArray, the data is removed from object.

I tried all possibilities.

Upvotes: 23

Views: 48064

Answers (7)

Niladri Banerjee - Uttarpara
Niladri Banerjee - Uttarpara

Reputation: 2329

this.myDataArray = this.myDataArray.filter((u) => u.id !== id);

OR

this.myDataArray.data = this.myDataArray.data.filter((u) => u.id !== id);  // <-- this works for my case

Courtesy: https://muhimasri.com/blogs/add-and-remove-table-rows-using-angular-material/

Upvotes: 1

Aman Jha
Aman Jha

Reputation: 544

First, find the index of a particular element let idx = this.SPARE_REQUESTED_DATA.findIndex((obj) => obj._id == id); after that remove that element on click this.dataSource.data.splice(idx, 1) // first argument idx of element and second argument how many items remove after that index after that refresh the data source this.dataSource._updateChangeSubscription() once the updateChangeSubscription if you are using pagination and filter this.dataSource.sort = this.sort //Your sort method this.dataSource.pagination = this.paginator //Your pagination method this.cdr.detectChanges() // changeDetectRef method from angular implement it in your constructur

Upvotes: 0

dhilt
dhilt

Reputation: 20744

The problem is that the immutability is in game: the mat-table after it is intialized only listens to the datasource reference

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

So the datasource reference should be updated in some way after changing its content, for example

  deleteTicket(rowid: number) {
    if (rowid > -1) {
      this.myDataArray.splice(rowid, 1);
      this.myDataArray = [...this.myDataArray]; // new ref!
    }
  }

or simplier

  deleteTicket(rowid: number) {
    this.myDataArray = this.myDataArray.filter((item, index) => index !== rowid);
  }

Upvotes: 5

Shivam
Shivam

Reputation: 95

Below code works for me

removeData(i){
 this.count.splice(i,1);
 this.dataSource = new MatTableDataSource(this.count);
}

Upvotes: 1

Leandro Feitosa
Leandro Feitosa

Reputation: 541

after splice() by index of item, you should update the datasource.

const index = this.dataSource.data.indexOf(item.id);
this.dataSource.data.splice(index, 1);
this.dataSource._updateChangeSubscription(); // <-- Refresh the datasource

Upvotes: 54

Max
Max

Reputation: 1488

I would suggest to use MatTableDataSource.

dataSource: MatTableDataSource = new MatTableDataSource<T>(ELEMENT_DATA);

deleteFunction(item){
    // find item and remove ist
    dataSource.data.splice(this.dataSource.data.indexOf(item.id), 1);
}

Upvotes: -1

Ali Badr
Ali Badr

Reputation: 138

After deleting the selected row, you have to reassign matDataTable again.

deleteTicket(rowid: number){
  // raw_data is the array of data that you getting from the db.
  this.raw_data.splice(rowid,0)
  this.dataSource = new MatTableDataSource(this.users);   
}

Upvotes: 4

Related Questions