I'm having trouble asynchronously adding a row to a table using the @angular/material:table schematic

Question

I'm having trouble asynchronously adding a row to a table using the @angular/material:table schematic

Having trouble asynchronously adding rows using the @angular/material:table schematic. Despite calling this.table.renderRows(), the new rows are not displayed correctly. The "works" part is added to the table, reflecting in the paginator, but the asynchronous addition of "doesn't work" only increases the row count on the paginator without visibly adding a new row.

I'm sure I'm not the only one facing this issue, so it must be my approach that's incorrect. What is the right way to achieve this?

Steps to reproduce:

Initialize Project

ng new stackoverflow1; cd stackoverflow1

Add angular material ng add @angular/material

Add schematic

ng generate @angular/material:table table

Include
```
<app-table></app-table>
```
in src/app/app.component.html
Add

src/app/table/table.component.ts
6. Serve the app with ng serve -o

OS: Ubuntu 20.04 on WSL2 Windows 10 version 2004
Browser: Firefox 82.0.2, Chrome 86.0.4240.183
Angular CLI: 10.2.0
Node: 10.19.0

javascript angular typescript asynchronous angular-material

Answer 1

Answer №1

To achieve this goal, it is essential to utilize a MatTableDataSource. The current TableDataSource (along with the TableItem) can be replaced with a new MatTableDataSource.

In the initial section of "table.component.ts":

import {MatTableDataSource} from '@angular/material/table';

Prior to @Component:

interface TableItem {
  name,
  address,
  ...
}

Following the second @ViewChild:

@ViewChild(MatTable) table: MatTable<TableItem>;
dataSource: MatTableDataSource<TableItem>;

Within ngOnInit():

this.dataSource = new MatTableDataSource<TableItem>();

Once these steps are completed, the provided code should function seamlessly, allowing for immediate updates to the table upon data insertion:

setTimeout(()=>{
  this.dataSource.data.push(({id: 0, name: 'works again!'});
},1)

Answer 2

To achieve this goal, it is essential to utilize a MatTableDataSource. The current TableDataSource (along with the TableItem) can be replaced with a new MatTableDataSource.

In the initial section of "table.component.ts":

import {MatTableDataSource} from '@angular/material/table';

Prior to @Component:

interface TableItem {
  name,
  address,
  ...
}

Following the second @ViewChild:

@ViewChild(MatTable) table: MatTable<TableItem>;
dataSource: MatTableDataSource<TableItem>;

Within ngOnInit():

this.dataSource = new MatTableDataSource<TableItem>();

Once these steps are completed, the provided code should function seamlessly, allowing for immediate updates to the table upon data insertion:

setTimeout(()=>{
  this.dataSource.data.push(({id: 0, name: 'works again!'});
},1)

I'm having trouble asynchronously adding a row to a table using the @angular/material:table schematic

Answer №1

Similar questions

I am unable to locate the module '@schematics/angular/utility/config'

The .NET controller does not receive traffic for the GET method

Creating a dynamic className string in JavaScript with React

Angular displays the error message TS2339, stating that the property 'handleError' is not found on the 'HeroService' type

Is it possible to use null and Infinity interchangeably in JavaScript?

Exploring the utilization of an interface or class in Typescript

Unexpectedly, a significant ngrx createEffect leads to an unusual error following an update, but the issue vanishes when certain code snippets like tap or filter are disabled

Encountering browser freezing issues with a Next.JS app when trying to add an input field

Create custom error messages for loopback instead of using the default ones

"Need to refresh localStorage in VueJS after navigating back with this.$router.go(-1)? Here's how

Reasons for storing `https.get()` inside a request constant in Node.js

The Angular 1.x Ajax request is not triggering the expected update in the view

Pass a URL string to a different script using Node.js

Utilizing numerous occurrences of my personalized Angular JS Directive within the identical form

Having trouble extracting parameters from the router listen event in react-router?

I did not anticipate the React setState function to behave in the manner it did

ways of exporting and using arrays in Node.js

I am receiving all NFT IDs when I should only be getting the ones that are associated with the current account

Looking for a solution to the error message: "X is not able to be assigned to the type 'IntrinsicAttributes & Props'"

Content within the Iframe is in the process of loading, followed by