Using @ngrx/component-store for local state management within 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 locally.

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 project that we are going to work with resides in chapter06/start_here/ngrx-component-store, inside the cloned repositor:

1. Open the project in VS Code.
2. Open the terminal and run npm install to install the dependencies of the project.
3. Once done, run ng serve -o.

This should open the app in a new browser tab. Log in as Admin and you should see it, as follows:

Figure 6.18 – ngrx-component-store app running on http://localhost:4200

Now that we have the app running locally, let's see the steps of...