Share state and perform updates from within component subtree using NGRX Signal Store
One of the main advantages of using the NGRX signal store is centralizing your state and reducing the complexity of your components.
In this example, you'll move all the logic related to filtering into its own child component. Then, you'll see how signals allow you to access and manage state across your component tree.
[00:00] From architecture perspective, NGRX signal store is very useful for moving away the state and state related logic into a specialized service and, basically, slimming down the component size and complexity. But where it also really shines is the ability to share and reuse the state and [00:19] the logic across a whole group of components. So for this reason, we're going to create a new component, which is called the employee slash employees filters, and we're going to move away everything that relates to the filters into the new component. [00:39] So let's open the file here to the side, and let's move away all the methods that relate to updating and clearing the filters. So cut and paste. Now since the store is not known yet, we [00:59] will also need to inject the store the same way. And, of course, let's add the missing imports. And what is important? Both the parent and the child component, they all relate to the same instance that has been provided within the [01:19] employees page component at the very beginning of the course. So the TypeScript file is already done, and let's also update the HTML part. So let's walk into the template, and here we need to move away these pieces. So the labels, including [01:39] the input and the button. So let's move it over here. And as we can see, we do have the access to the store because it has been correctly injected. And the last thing that we need is to use the app employees filters, the new component, and the parent component. And since we are working with [01:58] stand alone components, first, we need to import this one so that employee filters component is being available over here. And in the place where we have removed the filters, let's just put them over here. So after doing this update, we can [02:18] see that everything works as it used to before. And let's just make sure that when we walk into the Angular components, we can see that the app employees filter component is here within the component structure.