Getting started

The following software tools are required to complete this project:

• Nx Console: A VSCode extension that provides a graphical interface for working with Nx. You can learn more about installing it in Chapter 1, Creating Your First Web Application in Angular.
• GitHub material: The code related to this chapter can be found in the Chapter08 folder at https://github.com/PacktPublishing/Angular-Projects-Third-Edition.

Creating a monorepo application using Nx

Nx provides developers with tools for working with monorepos, including the following:

• create-nx-workspace: An npm package that scaffolds a new Nx monorepo application.
• Nx CLI: A command-line interface that runs commands against a monorepo application. Nx CLI extends the Angular CLI to provide more commands, which is faster due to the distributed caching mechanism.

It is recommended to use the Quick Open feature of VSCode when working with Nx monorepos. The number of generated folders and files will significantly increase, and it will be challenging to navigate through them. You can find out more at https://code.visualstudio.com/docs/editor/editingevolved#_quick-file-navigation.

To install Nx CLI, run the following command in a terminal:

npm install -g nx

The preceding command will install the nx npm package globally on our system. We can now scaffold a new Nx monorepo workspace using the following command:

npx create-nx-workspace packt...

Creating user-specific portals

Our application will consist of two portals that different users will use. Visitors will be able to view a list of POIs and select them on a map. Administrators will be able to view statistics for each POI. We will learn more about how to use Nx in the following sections:

• Building the visitor portal
• Building the administrator portal

Each portal will be a separate Nx library that will be loaded according to the URL entered in the address bar of the browser. Organizing our code in libraries allows us to reuse it between different applications and build and test it individually. We will start building the visitor portal in the following section.

Building the visitor portal

The visitor portal will be a library inside the Nx workspace that will be loaded by default. Let's see how we can build that library with Nx Console:

1. Run Nx Console from the VSCode sidebar and select the generate option from the GENERATE & RUN TARGET pane:

   

   Figure 8.4 –...

Managing application state with NgRx

The visitor portal will allow the user to see a list of available POIs and select one to view its location on a map. The list of available POIs and the selection of a POI is the global state of our application. We will integrate NgRx to manage the application state in the visitor portal by completing the following tasks:

• Configuring the state
• Interacting with the store

Let's begin by configuring the state of our application in the following section.

Configuring the state

Our application will consist of a root state for the whole application and a feature state for the visitor portal. We will start by executing the following command to create the root state:

nx generate ngrx app --root --no-interactive --parent=apps/tour/src/app/app.module.ts

The preceding command uses the generate command of Nx CLI, passing the following options:

• ngrx: Indicates that we want to set up an NgRx state
• app: The name of the state
• --root: Indicates that we want...

Visualizing data with graphs

The administrator portal will display traffic visits for each POI using a chart. When visitors visit a POI by clicking its marker on the map, traffic will be generated. The application will persist visit data in the local storage of the browser. It will keep a record for each visit containing the ID of the POI and the total visits. The administrator portal will consist of the following features:

• Persisting visit data in the store
• Displaying visit statistics

In the following section, we will start building the administrator portal by implementing the mechanism of keeping track of visits.

Persisting visit data in the store

Our application does not record traffic statistics for POIs yet. Let's see how we can accomplish this task:

1. Open the map.component.html file and add a <map-info-window> component:

<google-map height="100%" width="auto" *ngIf="poi$ | async as poi" [center]="poi">
  <map-marker...

Summary

In this project, we built an enterprise portal application for visiting POIs on a map and displaying visit statistics for each one. First, we saw how to use Nx to scaffold a new Nx monorepo application. Then, we created two different portals for our application, a visitor and an administrator. We learned how to use the NgRx library in the visitor portal to maintain and manage the state of our application. Finally, we saw how to use a chart library in the administrator portal to display statistics for each POI.In the next chapter, we will use the Angular CLI to build a UI component library using the Angular CDK.

Practice questions

Let's take a look at a few practice questions:

1. Which npm package creates an Nx monorepo application?
2. What are the differences between the Angular CLI and Nx CLI?
3. How can we enable NgRx in the library of a monorepo?
4. How do we select data from the store?
5. How do we interact with HTTP in NgRx?
6. Where do we modify the state of an NgRx store?
7. What is the difference between a root and a feature state?
8. Which npm package can we use for Google Maps in an Angular application?
9. How can we subscribe to an NgRx selector manually?
10. Which component do we use for displaying additional information on Google Maps?

Further reading

Here are some links to build upon what we learned in the chapter:

• Nx: https://nx.dev
• NgRx: https://ngrx.io
• NgRx store guide: https://ngrx.io/guide/store
• Angular Material card component: https://material.angular.io/components/card/overview
• Angular Google Maps: https://github.com/angular/components/tree/main/src/google-maps
• ng2-charts: https://valor-software.com/ng2-charts
• create-nx-workspace: https://www.npmjs.com/package/create-nx-workspace

Summary

In this project, we built an enterprise portal application to visit POIs on a map and display visit statistics for each one. First, we saw how to use Nx to scaffold a new Nx monorepo application. Then, we created two different portals for our application, a visitor and an administrator. We learned how to use the NgRx library in the visitor portal to maintain and manage the state of our application. Finally, we saw how to use a chart library in the administrator portal to display statistics for each POI.

In the next chapter, we will use the Angular CLI to build a UI component library using the Angular CDK.

Practice questions

Let’s take a look at a few practice questions:

1. Which npm package creates an Nx monorepo application?
2. What are the differences between the Angular CLI and Nx CLI?
3. How can we enable NgRx in the library of a monorepo?
4. How do we select data from the store?
5. How do we interact with HTTP in NgRx?
6. Where do we modify the state of an NgRx store?
7. What is the difference between a root and a feature state?
8. Which npm package can we use for Google Maps in an Angular application?
9. How can we subscribe to an NgRx selector manually?
10. Which component do we use to display additional information on Google Maps?

Further reading

Here are some links to build upon what we learned in the chapter:

• Nx: https://nx.dev
• NgRx: https://ngrx.io
• NgRx store guide: https://ngrx.io/guide/store
• Angular Material card component: https://material.angular.io/components/card/overview
• Angular Google Maps: https://github.com/angular/components/tree/main/src/google-maps
• ng2-charts: https://valor-software.com/ng2-charts
• create-nx-workspace: https://www.npmjs.com/package/create-nx-workspace