Share state and perform updates from within component subtree using NGRX Signal Store

Tomasz Ducin
InstructorTomasz Ducin
Share this video with your friends

Social Share Links

Send Tweet
Published 2 months ago
Updated 2 weeks ago

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.

egghead
egghead
~ 26 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today