Angular Material Table | Add Remove rows at runtime

Question

I am using Angular Material Table that is backed by a plain array as the data source.

this.employees = this.route.snapshot.data.employes; // of type Employee[] resolved using a Resolve guard
this.dataSource = new MatTableDataSource<Employee>(this.employees);

Once rendered initially, I want to add/remove rows from the data table by modifying the 'this.employess' array using method in my component :-

addEmployee(e: Employee){
 this.employess.push(e);   // I expect the table to have one row added after this.
}

removeEmployee(index : number){
  // splice the array at given index & remove one row from data table
}

PROBLEM

The data table rows are not affected when I add remove elements in my array. I found an a blog elaborating same problem but uses a custom data source. Is there any way using plain array ?

Angular doesn't detect changes on objects, including arrays, because the array reference doesn't change when add or delete elements on it. — 4ndt3s
– 4ndt3s, Commented Mar 8, 2018 at 13:07

Arun Sharma · Accepted Answer · 2018-11-20 05:28:57Z

16

The Simplest way is to call _updateChangeSubscription() on your dataSource as you are already using MatTableDataSource

this.dataSource = new MatTableDataSource(this.employees);

Your new modified addEmployee method will become:

addEmployee(e: Employee){
 this.employess.push(e);   // I expect the table to have one row added after this.
 this.dataSource._updateChangeSubscription()  // THIS WILL DO
}

answered Nov 20, 2018 at 5:28

Arun Sharma

1611 silver badge3 bronze badges

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

1 Comment

jonas Over a year ago

This worked for me. Though I accessed the mat datasource directly by this.datasource.data instead of using an own array to host the data. I pushed to that list by calling this.datasource.data.push()

Code Spy · Accepted Answer · 2019-06-16 12:28:52Z

11

In Latest versions of Angular Material 7/8

You need to call .renderRows() method after pushing new row data

addRowData(row_obj){
   var d = new Date();
   this.dataSource.push({
     id:d.getTime(),
     name:row_obj.name
   });
   this.table.renderRows();
 }

 deleteRowData(row_obj){
    this.dataSource = this.dataSource.filter((value,key)=>{
      return value.id != row_obj.id;
    });
 }

Source Tutorial link

answered Jun 16, 2019 at 12:28

Code Spy

9,9744 gold badges72 silver badges46 bronze badges

1 Comment

Rob Over a year ago

I get an error if I try to use this.dataSource.push with Angular 7 and latest materials - I need to use this.dataSource.data.push

rgantla · Accepted Answer · 2018-03-08 15:18:09Z

3

The problem is angular/ Mat-table does not detect any modifications to the underlying array after it has been instantiated. Hence, if you choose to add or delete a row you have to explicitly make the table listen to the event or just refresh the tables data. Below is how you would do it.

addEmployee(e: Employee){
 this.employess.push(e);   // I expect the table to have one row added after this.
 this.dataSource.data = this.employees; // this step will refresh the table
}

Same would be the case with your remove method.

Hope this helps.

answered Mar 8, 2018 at 15:18

rgantla

1,96613 silver badges18 bronze badges

Comments

ibenjelloun · Accepted Answer · 2018-03-08 12:50:35Z

1

You can create a class EmployeeDataSource that takes an Observable<Employee[]> instead of Employee[] :

import {DataSource} from '@angular/cdk/collections';
import {Observable} from 'rxjs/Observable';

export class EmployeeListDataSource extends DataSource<any> {


    constructor(private _employeeList$: Observable<Employee[]>) {
        super();
    }

    connect(): Observable<Employee[]> {
        return this._employeeList$;
    }

    disconnect() {
    }
}

Then create your data source by passing an observable :

this.dataSource = new EmployeeListDataSource(yourObservable);

You can find a stackblitz example here.

edited Mar 8, 2018 at 12:50

answered Mar 8, 2018 at 12:39

ibenjelloun

7,7732 gold badges34 silver badges55 bronze badges

Comments

ibenjelloun · Accepted Answer · 2018-03-08 13:16:32Z

0

I'm not sure if this is the best solution, but you could create a subject in which you store your data. Now you can use it just like the blogpost.

public $data: BehaviorSubject<MyDataType[]> = new BehaviorSubject([]);

addEmployee(e: Employee){
    this.$data
      .first()
      .subscribe(data => {
          let newData = data.slice();
          newData.push(e);
          this.$data.next(newData);
      }
}

edited Mar 8, 2018 at 13:16

ibenjelloun

7,7732 gold badges34 silver badges55 bronze badges

answered Mar 8, 2018 at 12:45

Robin Dijkhof

19.3k14 gold badges72 silver badges127 bronze badges

1 Comment

Jota.Toledo Over a year ago

With a behavior subject there is no need to subscribe if you want to access the current value of it, just use $data.value. Although I remember this being labeled as an anti-pattern somewhere.

Tushar Adlakha · Accepted Answer · 2020-05-11 07:08:08Z

0

I am using Angular 9, Here what i have done

this.dataSource.data.push({
      profile:"profile",
      skillRequired:"skillRequired"
    });
this.dataSource.filter = "";

using filter datatable automatically gets updated

answered May 11, 2020 at 7:08

Tushar Adlakha

113 bronze badges

Collectives™ on Stack Overflow

Angular Material Table | Add Remove rows at runtime

6 Answers 6

1 Comment

1 Comment

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

1 Comment

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related