Using NgRx Component Store to manage the state of 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 standalone 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 the following command to serve the project with the backend app:

   npm run serve ngrx-component-store
   

   This should open the app in a new browser tab, and you should see the following:

   

   Figure...