SmartNgRX Documentation

Home
Using @smarttools/smart-ngrx
Intro Effects Service Injection Token Entity Definitions Global Registration Entity Registration ChildDefinition Smart Selector
Mark and Delete
Introduction MarkAndDeleteInit Global Mark and Delete Entity Mark and Delete
Child Fields
CRUD Support
Retrieving Rows Virtual IDs Updates Create (Add) a Row Delete a Row
Using With Existing Selectors WebSockets Error Handling
Using @smarttools/smart-signals
Intro Effects Service Injection Token Entity Definitions Global Registration Entity Registration ChildDefinition Smart Signals
Mark and Delete
Introduction MarkAndDeleteInit Global Mark and Delete Entity Mark and Delete
Child Fields
CRUD Support
Retrieving Rows Virtual IDs Updates Create (Add) a Row Delete a Row
Using With Existing Signals WebSockets Error Handling
NgRX Demo Walkthrough
Introduction Database Structure Retrieving Data Setup Client Side Effects Services Selectors Tree Component Updating Fields Adding Rows Deleting Rows Processing WebSocket Messages
Signals Demo Walkthrough
Introduction Database Structure Retrieving Data Setup Client Side Effects Services Smart Signals (Selectors) Tree Component Updating Fields Adding Rows Deleting Rows Processing WebSocket Messages
API
Smart NgRX API Smart Signals API Internal API API Changes
Signals Demo Walkthrough Smart Signals (Selectors)

Smart Signals (Selectors)

From a SignalStore perspective, once you've configured your global provider and your feature providers, and created the Effects Services to retrieve your data, the only Signal thing you'll need to concern yourself with are the selectors. In the case of SmartSignals, these are actually computed signals created by Smart Signals. And, even these aren't quite what you are used to because we've abstracted them as well. You'll still need to use standard Signals, using NgRX Signals or Angular Signals, for other state management tasks, such as storing form data like we do in the demo application to store the currently selected location.

We won't go into much detail here because this is standard Signals code. But you can see the code for getting the current location in current-location folder.

Since all of our selectors look the same except for the feature store they are getting the data from, we'll focus our time on the selectors for the Tree (Standard) page.

Top Selectors

The main selector in our top selector is selectTopLocations you'll see that it uses selectTopEntities as the first parameter which is used to retrieve the top entity slice from the feature. The second parameter is the array of ChildDefinitions which has just one item because the list of IDs we will use to retrieve the locations is thelocations field.

Two things you'll want to pay special attention to. We are passing in pointers to the signals, not the signals. The signals get executed inside createSmartSignal(). Also, you'll want to pass in the child signal that was created using another smart signal that resolves its children if there are any.

In this case, passing the childSelector selectLocations would not work, we want to pass in selectLocationsDepartments instead.

Current Location Signal

The selectCurrentLocationSignal simply pulls out the currently selected location ID from the state.

Location Selectors

The Location Selectors holds selectors that will give us access to the locations.

Once again, we see our createSmartSignal() being used to retrieve the locations and the children of the locations. In this case, the departments. It takes our selectLocationEntities as the first parameter and the array of ChildDefinitions as the second parameter.

Department Selectors

And so we continue down the stack and everything starts to look the same. The Department Selectors folder has the selectDepartments() selector that is used to retrieve the department entities and the selectDepartmentsChildren() selector that is used to define how to access the department children.

Department Children Selectors

And finally we come to the bottom of the tree where the only thing left to do is to select the department children.

Conclusion

Notice how coming from the top, we combine selectors until we've retrieved all the data we need to create the tree. Next, we'll show how we only retrieve the data we need as it is needed. This is one of the main features of SmartSignals. We don't retrieve everything all at once.

Previous
Effects Services
Next
Tree Component