resourceByGroup is the missing Angular resource function!
Adding the resource functions directly into the Angular framework is a real blessing to "simplify" the management of loading states for an asynchronous request (usually an API call).
These functions offer a declarative and reactive DX, made quite simple thanks to the use of signals as the source.
These tools are really great for both beginners and more experienced developers.
However, there’s a feature I find missing — one that the current resource / rxResource / httpResource don't support, but should ideally be just as easily exposed by the framework.
I created this feature and named it resourceByGroup. I think you should take a look at it.
Here’s the Stackblitz link if you want to see a demo.
What is resourceByGroup for?
Think of resourceByGroup as a resource that can be executed in parallel or concurrently.
It’s particularly useful when working with a list of entities.
It also might be a good alternative to rxMutate
In a simple example, it allows you to apply updates to multiple entities one after another and in parallel.
It does not update several entities with a single API call but creates an individual update API call for each entity that needs it.
This allows you to finely track the update status of each entity independently.
It’s ideal for improving the UI/UX of a data list.
How to use resourceByGroup?
The parameters of resourceByGroup are identical to those of the resource function (Angular 19), except it has an additional groupIdentifier property, and the request property is mandatory.
What is groupIdentifier for?
This parameter defines the groups and discriminates the request to create groups.
This is where the "ByGroup" comes from — making a resource per group.
In most cases, you will return the id present in the request or its equivalent.
How to display the information from resourceByGroup?
This function returns a signal which is a mapper, key (group identifier) / value (ResourceRef).
And you can use it in the template like this:
The
resourceByGroupimplementation contains zero lines of RxJS!I wrote an article introducing this kind of mechanism with RxJS.
What's next for resourceByGroup?
I find this function essential, especially when working with lists to easily improve the customer experience.
If the feedback is good, I might submit a PR to have Angular integrate it directly into the framework.
Its naming or even its implementation might change depending on the feedback I get.
In the meantime, I’ll add resourceByGroup support to the small tool I presented in this article for effective CRUD action and server-state management:
Declarative & reactive Angular resource signal server-state management
I can’t wait to hear your thoughts!
If you enjoyed the article or have any questions, feel free to leave a comment or follow me on LinkedIn Romain Geffrault.
Note: The data flow management in the demo isn’t perfect — the demo’s sole purpose was to showcase
resourceByGroup.
