Angular NgRx Data custom selectors
How to extend NgRx Data to select only the data that we need.
This article assumes you already installed an Angular project with NgRx and NgRx Data.
In a previous article, I was showing how easy it can be to request a standard CRUD backend with convention through NgRx Data.
This is a great tool, but sometimes we have a simple need that comes out of the easy path that it offers.
Display filtered data
Lets’s say we have our Todo app. We handle in the DTO an ”active” field that is a boolean. I’d like to know how many of my entities are “active”. There is a tool for that : filterFn. This is a property of the EntityMetadata. You simply need to specify how you want to filter your list, and then consume the Observable : filteredEntities$ from your Service.
How do you set up this filter ? Simply declare the filterFn in your EntityMetadata :
In the component, you need to set the filter whenever you need it, otherwise, the filteredEntities$ Observable emits an empty list. You simply call .setFilter() on your service, with the proper parameter that matches your function signature :
Have an advanced filter on Entities
If you need some more advanced filtering, you can come with PropsFilterFnFactory that allows you to work with regexp. This could look like that if you want to filter on 2 different fields case insensitive :
Once you configured this filter, use it with any input from the user or any other source like that :
// well this is hardcoded filter obviously :)
this.todosService.setFilter('angular');This is nice, but you only have one Observable, and what if you wanted to display multiple informations at the same time ? What about knowing how many both active and inactive elements we have ? Obviously, you can only declare one filterFn in your Entity Metadata.
The custom selectors from NgRx Data
NgRx Data has some extension points, and one that can be helpful here is the custom selector. The official doc has the code right, but it’s mixed with another entity selector and can be confusing. Here is a simple method :
Get Alain Boudard’s stories in your inbox
Join Medium for free to get updates from this writer.
We want to display at the same time the number of Todos in the “divers” category as well as the number in the “angular” one.
We simply create a new selector, the schematics don’t do much :
ng g selector selectors/Todo --skip-testsIt’s creating an empty file with useless imports, since selectors are truly pure functions that get plugged in the existing Store. After creation, we simply fill the selector to retreive the desired Todos filtered by Category :
Now, in any component, we simply create Observables based on this selector, that takes a string as a parameter (it could take anything else) :
this.store.pipe(select(selectTodoByCategory('angular')))
Now, we have multiple Observables that we can use in our template to have specific information about our Data entities. And remember that these Observables only query data in the Store and no XHR query would be emited whatsoever when subscribing to them.
<p>todos "divers" : <span>{{(todos1$ | async)?.length}}</span></p><p>todos "angular" : <span>{{(todos2$ | async)?.length}}</span></p>
With a little bit of bootsrap, you get this :
NgRx Data has a lot of extension points, that only wait for us to use them, you can change the way URL are handled if the default doesn’t fit your services. You of course play with the sorting of your Collections with the sortComparer of the EntityMetadata, this can be very useful, like that :
This is it, obviously, but I’ll keep on playing with this great tool, I love NgRx and its components, and the teams who work on it, I hope this could help anyone who would start customizing his conf.
Check the code in action here (without any CSS as I’m writing these lines, but I could change my mind rapidly … ) :
