Fixing MatTable Not Displaying Data with Angular 19 rxResource and Signals

Описание: Learn how to properly connect Angular's Material Table (`MatTable`) with reactive data loaded via `rxResource` and Signals in Angular 19 for seamless UI updates.
---
This video is based on the question https://stackoverflow.com/q/79389241/ asked by the user 'D052057' ( https://stackoverflow.com/u/11065837/ ) and on the answer https://stackoverflow.com/a/79389716/ provided by the user 'Naren Murali' ( https://stackoverflow.com/u/5924562/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: RxResource, Signal, MatTable issues - template show no data

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to drop me a comment under this video.
---
The Problem: Angular Material Table Shows No Data When Using rxResource

When using Angular 19's new rxResource API along with Signals to fetch data, the Material Table component (MatTable) sometimes doesn't display the loaded data. Surprisingly, a workaround like adding a hidden JSON binding (<p style="display:none">{{ tubeRecords() | json }}</p>) triggers the data to show, but this is an unintended hack.

Why Does This Happen?

The issue roots in how Angular’s change detection works with reactive primitives like Signals and Observables. If the MatTable's dataSource is not updated in a way that Angular can track, the UI does not refresh automatically.

In this context, your dataSource should be connected reactively to data changes, because simply assigning a new MatTableDataSource inside a computed property without notifying Angular’s change detector leads to no UI update.



Proper Solutions To Connect rxResource Data With MatTable

You can elegantly fix this by making MatTableDataSource reactive and properly updating it when data is loaded.

Option 1: Use RxJS Operators Inside rxResource Loader

Wrap your HTTP request with RxJS operators (map) inside rxResource. Construct your MatTableDataSource and bind the paginator right when the data is fetched:

[[See Video to Reveal this Text or Code Snippet]]

Bind the table data source directly to the resource’s value in your template:

[[See Video to Reveal this Text or Code Snippet]]

Option 2: Use Angular Signals and computed to Derive Data Source

Keep your rxResource loader simple, returning raw data. Then create a computed Signal that wraps the data into a MatTableDataSource and sets the paginator:

[[See Video to Reveal this Text or Code Snippet]]

Use the computed Signal in your template:

[[See Video to Reveal this Text or Code Snippet]]

Why These Approaches Work

Reactive updates: Signals and Observables coupled with computed or RxJS operators ensure Angular knows when data changes.

Proper trigger for change detection: Creating a new MatTableDataSource on each data refresh allows Angular Material components to internalize changes and rerender rows.

Paginator setup: Assigning the paginator consistently ensures navigation works immediately.

Summary

Avoid manually manipulating MatTableDataSource without reactive triggers.

Encapsulate data transformation inside the resource loader or inside a computed.

Bind Material Table’s dataSource directly to the reactive data source.

This ensures your Angular Material tables display data correctly and update when backend data changes, without workarounds like hidden debug bindings.