Using NgRx Store Devtools to debug the state changes

In this recipe, you'll learn how to use @ngrx/store-devtools to debug your app's state, the actions dispatch, and the difference in the state when the actions dispatch. We'll be using an existing app we're familiar with to learn about the process.

Getting ready

The app that we are going to work with resides in start/apps/chapter06/ngrx-devtools 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-devtools to serve the project

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

Figure 6.3 – Using ngrx-devtools app running on http://localhost:4200

Now that we have the app set up, let's see the steps of the recipe in the next section.

How to do it…

1. We have an Angular app that already has the @ngrx/store package integrated. We...

Using NgRx selectors to select and render state in components

In the previous recipes we created some actions, a reducer and integrated devtools to observe the state changes. However, our bucket application still renders the data using some variables in the BucketService. In this recipe, we're going all in with NgRx. We're going to render the bucket items from the state as we already are saving them in the NgRx store.

Getting ready

The app that we are going to work with resides in start/apps/chapter06/ngrx-selectors 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-selectors to serve the project

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

Figure 6.16 – Using ngrx-selectors app running on http://localhost:4200

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

How...

Using NgRx effects to fetch data from API calls

In this recipe, you'll learn how to use NgRx effects using the @ngrx/effects package. We have an app that already has @ngrx/store and @ngrx/store-devtools installed in the app. And we are able to add and remove items from the bucket. However, in this recipe we'll use a server to receive, store, add and remove items from a bucket. I.e. the data will live in the NgRx store as well as on the backend.

Getting ready

The app that we are going to work with resides in start/apps/chapter06/ngrx-effects 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-effects with-server 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.8 – ngrx-effects app running on http://localhost:4200

Now that we have the app running...

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...

Using @ngrx/router-store to work with route changes reactively

NgRx is awesome because it allows you to have your data stored in a centralized place. However, listening to route changes is still something that is out of the NgRx scope for what we've covered so far. We did rely on the ActivatedRoute service to watch for route changes, and when we want to test such components, the ActivatedRoute service becomes a dependency. In this recipe, you'll install the @ngrx/router-store package and will learn how to listen to the route changes using some actions built into the package.

Getting ready

The project that we are going to work with resides in chapter06/start_here/ngrx-router-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, and you should see something like this:

Figure 6.19 – ngrx-router-store app...

Authorized access to routes using route guards

Not all routes in your Angular app should be accessible to everyone in the world. In this recipe, we’ll learn how to create route guards in Angular to prevent unauthorized access to routes.

Getting ready

The app that we are going to work with resides in start/apps/chapter07/ng-route-guards 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:

   npm run serve ng-route-guards
   

   This should open the app in a new browser tab. You should see the following:

   

   Figure 7.12: ng-route-guards app running on http://localhost:4200

Now that we have the app running locally, let’s see the steps of the recipe in the next section.

How to do it…

We have an app with a couple of routes already set up. You can log in as either an employee...

Working with route parameters

Whether it is about building a REST API using Node.js or configuring routes in Angular, setting up routes is an absolute art, especially when it comes to working with parameters. In this recipe, you’ll create some routes with parameters and will learn how to get those parameters in your components once the route is active.

Getting ready

The app that we are going to work with resides in start/apps/chapter07/ng-route-params 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:

   npm run serve ng-route-guards
   

   This should open the app in a new browser tab. You should see the following:

   

   Figure 7.13: The ng-route-params app running on localhost:4200

Now that we have the app running locally, let’s see the steps of the recipe in the next section.

How...

Showing a global loader between route changes

Building user interfaces that are snappy and fast is key to winning users. The apps become much more enjoyable for the end users, and it could bring a lot of value to the owners/creators of the apps. One of the core experiences on the modern web is to show a loader when something is happening in the background. In this recipe, you’ll learn how to create a global user interface loader in your Angular app that shows whenever there is a route transition in the app.

Getting ready

The app that we are going to work with resides in start/apps/chapter07/ng-global-loader 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:

   npm run serve ng-global-loader
   

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

   

   Figure 7.16: ng-global...