Push elements to array does not work in type script

Question

I have implement table using MatTableModule in angular using typescripts.

It is working fine when I assign value to datasource like this,

let dataRow = {name: dealerInfo.name, address: dealerInfo.address, town: dealerInfo.town, contact:dealerInfo.contact};
this.dataSource = [dataRow];

As I need to add rows dynamically I used push() as follows (but it doesn't work, it does not show data in the html),

let dataRow = {name: dealerInfo.name, address: dealerInfo.address, town: dealerInfo.town, contact:dealerInfo.contact};
this.dataSource.push(dataRow);

This is how my data source defined.

dataSource: any [] = [];

What should be the correct way of adding elements dynamically?

This is like saying "push elements to array does not work in Javascript". There's no such thing as Typescript as far as the browser is concerned. Can you recreate your problem in a Stackblitz? — Kurt Hamilton
– Kurt Hamilton, Commented May 3, 2020 at 8:37
Does this.dataSource = [...this.dataSource, dataRow]; work? In that case it's Angular's change detector that doesn't pick up the call to push. — sroes
– sroes, Commented May 3, 2020 at 8:39

baao · Accepted Answer · 2020-05-03 08:56:42Z

3

The correct way to create a MatTableDatasource is to create an instance of it that you pass as [dataSource] property

dataSource: MatTableDataSource<any> = new MatTableDataSource<any>();

You can pass initial data in the constructor. Then you push to its data property

this.dataSource.data.push(dealerInfo);

Since you are copying properties 1:1 by name, there's no need to create intermediate objects first.

Also, create an interface instead of using any

export interface TableRow {
    name: string;
    ...
}

and

new MatTableDataSource<TableRow>();

Documentation:

DataSource

For most real-world applications, providing the table a DataSource instance will be the best way to manage data. The DataSource is meant to serve a place to encapsulate any sorting, filtering, pagination, and data retrieval logic specific to the application.

edited May 3, 2020 at 8:56

answered May 3, 2020 at 8:50

baao

73.6k18 gold badges152 silver badges209 bronze badges

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

2 Comments

abo Over a year ago

this.dataSource.data.push(dealerInfo); did not work. Instead I have defined another array of TableRow type and collect all the rows to it. Finally assign it to this.dataSource.data and it works.

baao Over a year ago

That's not how it should be done. Very ineffective. @abo

abo · Accepted Answer · 2020-05-03 11:17:01Z

0

With the support of @baao's answer I solved the issue as follows,

  // Defined variables.
  rowDataArr: RowData[] = [];
  dataSource: MatTableDataSource<RowData> = new MatTableDataSource<RowData>();

And once I received data from back end.

valuesFromBackEnd.forEach(rowData=> {
          this.rowDataArr.push(rowData);
        });
        this.dataSource.data = this.rowDataArr;

answered May 3, 2020 at 11:17

abo

3784 silver badges20 bronze badges

Collectives™ on Stack Overflow

Push elements to array does not work in type script

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related