Provide the NGRX Signal Store within a Component, a Route, or globally

[00:00] There are a few different ways to provide the NGRX signal store within our application. But before we configure the providers, let's first inject the signal store into the component that is going to directly make use of it. So for this reason, let's walk into app slash employees slash employee listing component. That's the component that we can [00:20] see displayed on the right hand side. It has a very simple template and very simple code that is loading the external data via HTTP. What we want to do here is to create a simple property called store for simplicity and inject the signal store, which is a Angular service. So [00:39] we're using the inject function imported from Angular core the same way as we inject all services. And what we want to provide here is the employee store. This is a class. This is a service, which we're going to see just in a while. After saving the file, we will see that Angular is going to explode [00:59] since there are simply no providers yet for this injectable since we haven't configured any of them. So what we're going to do in the first attempt is to provide it globally in the root injector. So the same way as we are using the provided in option in the [01:18] injectables, the same way or in a very similar way we can do it within the signal store declaration as the first parameter. So the first parameter is not going to be a function, but it's going to be a configuration object where what we provide is simply provided in, which is going to include the [01:38] root option. So after saving the file, we will see that the application runs correctly. So the component does have the service injected, but what we also want to see is that when we walk into the employee listing component, as we can see right here, right now, we will see that there is a [01:58] signal store and we also want to see where does it come from. So if we scroll over here, we can see that there is a employee listing component, which does include the service that is injected, the signal store. And where does it come from? It's basically the root injector. [02:19] The other way which we can take a look at it is to head over to injector tree tab within the Angular dev tools. And here in the environment hierarchy, if we zoom it out a little bit and we click on the root injector, we will see that there is quite a bit of [02:38] different injectables over here. And if we filter it by signal store, we'll see that, yeah, signal store is available right here. So this is providing the store globally within the root injector. Another way to provide the n g r x signal store is to provide it within a route. [02:58] So we're going to remove it from the route injector, and we'll walk into the app routes file, the one that configures the routing entries, the ones that we have over here, employees. So depending on our needs, we might include the provider's option. Let's say that in our case, this is going to be [03:18] the employee's path, which would make the providers available for all children roots. So here within the providers, we're just putting the employee store and we'll save it. And right now, Angular is back and working. So if we take a look at the employees listing, and again, we [03:38] were taking a look at the signal store. Let's see where does the instance come from. Then we can see that the employee listing component, which is certainly available within the router outlet, the instance comes from the root employees injector. So let's take a look at the injector tree. And here, we'll [03:58] see within the environment hierarchy that for the root injector under the root injector, there is a root employees injector, and the one includes the signal store right here on the right hand side. So this is the second option. Let's configure the last option, which is providing the store [04:17] within a component. So first, let's remove the provider from the roots. And before I hit save and get the null injector error, let's know that employee listing is a child of employee page components. So what we're going to do is to keep employee listing injecting the service, but it is [04:37] its parent which is going to provide it. So let's first remove it from the roots. And within the employees page component, let's just put the provider section where we're going to include the employee store. And after saving, we'll see that the application [04:58] works correctly and when we move to the injector tree. And now let's take a look at the element hierarchy. We'll see that within the employee page component, there is a signal store that is directly being used by the employee listing. [05:18] Be aware that whatever we create using the signal store function is a class that is a regular Angular injectable. So we can see that when we take a look at the sources and we would look for the signal store function definition where we can see that [05:37] there is a class signal store that is an injectable and it is directly returned from the function within the NGRX signal store sources. In other words, NGRX signal store behaves just as regular services in Angular.