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

Restricting the frequency at which a specific key value is allowed to appear in JSON documents

Enhance Tuple in Angular Component Properties

Responsive images in CSS3/HTML5 are designed to adapt to different

Group the JSON data in JavaScript by applying a filter

Prevent typing in text box when drawer is activated by pressing a button

Exploring TypeScript's Classes and Generics

Inserting POST request data into subdocument arrays of a database

Combining Jquery with Append to Dynamically Update PHP Variables

Troubleshooting issue: matTooltip malfunctioning in *ngFor loop after invoking Angular's change

Switch between various components using multiple buttons in Next.js

Having trouble sending a JavaScript variable to PHP via AJAX

Vertical scroll bar positioned on the left side of a DIV

Utilizing Vue.js and Webpack to Handle Requests for Multiple Incorrect Resource Links

Regular pattern with Kubernetes cluster endpoint utilizing either IP address or fully qualified domain name

Surprising 'T_ENCAPSED_AND_WHITESPACE' error caught me off guard

Limiting character count in jQuery using JSON

Create a function that will repeatedly call itself at specified intervals, increment a variable, and update the class values of elements with an id matching the current value of the

What are the best ways to personalize my code using Angular Devextreme?

Creating a parameterized default route in Angular 2

Toggle visibility of multiple DIVs with identical classes using radio buttons