Using NgRx Component Store to manage state for a component

In this recipe, you'll learn how to use the NgRx Component Store and how to use it instead of the push-based Subject/BehaviorSubject pattern with services for maintaining a component's state. We'll also see how this can facilitate cross-component communication using the Component Store.Remember that @ngrx/component-store is a stand-alone library and doesn't correlate with Redux or @ngrx/store, and so on.

Getting ready

The app that we are going to work with resides in start/apps/chapter06/ngrx-component-store inside the cloned repository:

1. Open the code repository in your Code Editor.
2. Open the terminal, navigate to the code repository directory and run npm run serve ngrx-component-store to serve the project with the backend app.

This should open the app in a new browser tab. If you add a couple of items, you should see the following:

Figure 6.12 – ngrx-component-store app running on http://localhost...