Let’s make a series of entries in which we’ll create an application with Angular 8 and Firebase. The application will be a ToDo App, that is, a task manager app. It will use the Cloud Firestore database, and Firebase Authentication for the login system.

Related entries

1. Introduction 
2. Configuring Firebase and Bootstrap in Angular. Understanding Cloud Firestore
3. Creating our first component – Click event  
4. Our first reactive form 
5. Saving and reading data in Cloud Firestore – ngIf and ngFor
6. Introduction to Routing <– You are here
7. Login system with Angular and Firebase
8. Releasing our Angular App in Azure with VS Code

As I publish the articles, I will be placing the links here above.

Introduction to Routing

Now let’s work with routing. What we are going to do is to create a new component, which we can access from a menu which we are going to create, but first let’s talk a bit about routing. The idea of ​​routing is that, in our application we can have several components, and, depending on where the user is on our website, we will want to show one component and not another. So we can have our application divided into sections, and according to the section where the user is, then a component is shown.

To go from one section to another, what we do is to modify the URL of the user’s browser. Angular allows us to make modifications to the URL in a simple and direct way, the good thing about this is that Angular is also in charge of keeping working elements of the standard navigation, such as the back button. So, if your user goes from an X section to a Y section on your page, he can press the browser’s Back button to return to section X from the Y section.

What we do with routing is to configure which component we want to show in a given URL. This configuration must be done in the module. However, it is normal to have the configuration of the routes in a separate module. Remember that in the past we said that an angular application can have several modules, and that the way to reuse the functionality of a module is by importing it into the module that will use it.

As we did this project with the Angular CLI, and we said that we want to use routing, then a module has been created in the app-routing.module.ts file. If we open it, we will see that we actually have a class decorated with @NgModule, so this is a module. We can see that we have a variable called routes where we define the routing rules of this module. The idea is that here we say that according to the URL that is in the browser, we want to show this or that component. Right now there are no routing rules, because we have always used just the content of the App component. We are going to create our first routing rule, for that we modify the routes variable in the following way:

Routes is an array of objects, and each element of that array is an object with properties, such as path and component. Each route basically says is “for this URL segment we want to show this component”. So in path we place the segment of the URL, and in component we place what component we want to show in that URL.

The question is, where is the component going to be displayed? Well, wherever the router-outlet directive is. If we go to the template of the App component then we can see that what we have is the todo-list component hardcoded, but that does not allow us to have flexibility to show different components according to the URL path where the user is. To change that, let’s replace the todo-list component with:

If we run our application, we will see that nothing has changed. The difference now is that we are using a routing rule to define the component that we are going to show on the screen. Now, we are going to create a menu that will allow the user to navigate to another section of our application. This menu will be found in its own component, so we will create a component using the Angular CLI:

ng generate component menu

Now, in the template of the Menu component, let’s place the following code:

If you notice, in this HTML we have a bootstrap navbar that is going to be fixed at the top of the screen. We can see that we have a special attribute in the links, called routerLink. With routerLink we can instruct Angular to redirect the user to a certain route.

We see that we have a “Home” link and a “Contact” link. In the case of the routerLink of the link Home, its value is an empty string, the idea is that this would take us to the component whose path is also an empty string (as is the case with the todo-list component). In the case of the Contact link, its routerLink value is “contact”. We do not have a routing rule for this URL segment yet.

Now, let’s place this component in the App component template:

We place the app-menu outside the router-outlet, because we want the menu component to be a component that is displayed in all sections of our application. Thus, we can make use of the menu no matter where we are. We remember that when we go from one URL to another, it is the content of the router-outlet that varies according to the component that we have defined in our routing rules in the app-routing.module.ts file. What is outside of the router-outlet stays the same regardless of the URL segment.

If we run the application as it is, we will see that we have our menu and below it we have our todo-list component. If we click where it says “contact” in the menu, nothing will happen, this because we do not have a routing rule defined for the “contact” URL segment. We are going to correct this. We go to the terminal and execute the following command:

ng generate component contact

Now let’s create a new routing rule for the “contact” URL segment. For that we return to the app-routing.module.ts file and modify the routes variable in the following way:

With this we have defined that when the URL segment is “contact” because the ContactComponent component will be shown on the screen, and if we press Home, then the TodoListComponent component will be shown.

Now that we are clear about the routing and its basic configurations, we can build our login system. We will do this in the next entry.

Regards!