Angular 7: Dynamically add rows to Material data table

Question

How do I add data which I get from a service into my data table dynamically?

I get data from a dialog with the service AuthenticationService. My first thought was to use this.dataSource.push(this.transaction);, which doesn't work.

This is how I tried to do it:

export class TransactionPoolComponent implements OnInit {
  displayedColumns = ['sender', 'recipient', 'amount', 'fee'];
  dataSource = ELEMENT_DATA;
  transaction: Transaction;


  constructor(private _AS: AuthenticationService) {
  }

  ngOnInit() {
    this._AS.transaction$.subscribe( transaction => {
      this.transaction = transaction;
      this.dataSource.push(this.transaction);
      console.log(this.transaction);
      }
    );
  }
}

export interface Transaction {
  sender: number;
  recipient: string;
  amount: number;
  fee: string;
}

const ELEMENT_DATA: Transaction[] = [
];

Sajeetharan · Accepted Answer · 2018-12-15 13:00:03Z

2

This should work if you see the data is getting added. You need to manually call the detectChanges to keep the ui updated. you can do the same with detectChanges()

you need to inject inside the constructor as,

constructor(private ref: ChangeDetectorRef) {

once you assign the data just call,

this.dataSource.push(this.transaction);
this.ref.detectChanges();

also one more mistake, you need to push the element to the array and then convery to dataTable,

this.ELEMENT_DATA.push(this.transaction);
this.dataSource = new DataSource(this.ELEMENT_DATA));

edited Dec 15, 2018 at 13:00

answered Dec 15, 2018 at 12:43

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

7 Comments

Michael Over a year ago

How do I define the chRef?

Michael Over a year ago

I get the error 'Unresolved variable or type ref' now. Added the ChangeDetectorRef to the constructor.

Sajeetharan Over a year ago

use this.ref as you need to refer

Michael Over a year ago

Still doesn't update the table :/. Do you need any more information maybe?

Michael Over a year ago

But I'm not using DataSource at the moment ^^

|

phonex · Accepted Answer · 2018-12-15 12:58:35Z

2

you must change the datasource reference.

this.dataSource = new DataSource(new Array(old + new pushed value))

Edit:

Because you don't use **DataSource**, you can do the following
temp = this.datasource.slice();
temp.push(value);
this.datasource = temp;

edited Dec 15, 2018 at 12:58

answered Dec 15, 2018 at 12:52

phonex

511 silver badge4 bronze badges

2 Comments

Michael Over a year ago

What type would temp be?

phonex Over a year ago

like datasource: Transaction[]

Pratham Sharma · Accepted Answer · 2021-01-21 21:38:20Z

You just need to change the reference of the dataSource and it would detect changes automatically. Something like:

export class TransactionPoolComponent implements OnInit {
  displayedColumns = ['sender', 'recipient', 'amount', 'fee'];
  dataSource = ELEMENT_DATA;
  transaction: Transaction;


  constructor(private _AS: AuthenticationService) {
  }

  ngOnInit() {
    this._AS.transaction$.subscribe( transaction => {
      this.transaction = transaction;
      // You were pushing to dataSource but your data is stored in 'data' 
      // object of dataSource, and you need to changed the reference of the 
      // dataSource by assigning dataSource to itself or assigning a new Array 
      // to dataSource and it would automatically detect the changes and 
      // update the table
      this.dataSource.data = this.dataSource.data.push(this.transaction);
      console.log(this.transaction);
      }
    );
  }
}

export interface Transaction {
  sender: number;
  recipient: string;
  amount: number;
  fee: string;
}

const ELEMENT_DATA: Transaction[] = [
];

Collectives™ on Stack Overflow

Angular 7: Dynamically add rows to Material data table

3 Answers 3

7 Comments

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

2 Comments

Comments

Related