Setup Client Side

Now that you've had a look at the data we are working with, let's take a look at how to get that data into our client code.

Global Registration

As you may remember from our Global Registration documentation, the first thing we need to do is to provide a global registration in our app.module.ts file directly or indirectly. Because we use standalone components for our App component, we put this code in our app.config.ts file.

Simply add the provideSmartNgRX function to the providers array like we've done in apps/demo/src/app/app.config.ts

Entity Registration

The next step we covered in our documentation was Entity Registration which registers the features and entities that we want to use in our appliction.

As we mentioned in the Introduction, each of the tabs in our application follow a separate strategy. We also store state for the currently selected location using a standard NgRX slice. Not everything is suitable for SmartNgRX.

You can view the registration code for each of the tabs in the following locations. I'm providing links to the providers section and under each of those links, links to the entity definitions they reference

• Tree (Standard)
  • standardTopDefinition
  • standardLocationsDefinition
  • standardDepartmentsDefinition
  • standardDepartmentChildrenDefinition
• Tree (No Refresh)
  • noRefreshTopDefinition
  • noRefreshLocationsDefinition
  • noRefreshDepartmentsDefinition
  • noRefreshDepartmentChildrenDefinition
• Tree (No Remove)
  • noRemoveTopDefinition
  • noRemoveLocationsDefinition
  • noRemoveDepartmentsDefinition
  • noRemoveDepartmentChildrenDefinition
• Tree (No Dirty)
  • noDirtyTopDefinition
  • noDirtyLocationsDefinition
  • noDirtyDepartmentsDefinition
  • noDirtyDepartmentChildrenDefinition

One thing you'll notice is that each of the routes points to the same tables in the end. This is so we can illustrate the various ways SmartNgRX can be used. In your application, you'd have one definition per table.