One of the every web application’s main features is navigation, and to enable it in our project, we need to use routing. The Angular Router enables navigation from one view to the next as users perform application tasks.

In our navigation menu, we are going to have three menu options: one for the home screen, another one for the owner operations and the last one for the account operations. Hopefully, this will help you realize the advantages of using multiple modules inside a project and how the lazy content loading helps your application perform better.

If you want to see all the basic instructions and complete navigation for the .NET Core series, check out the following link: Introduction of the .NET Core series.

For the complete navigation and all the basic instructions of the Angular series, check out: Introduction of the Angular series.

For the previous part check outCreating Angular client side – Preparing the project and creating the first component

The source code is available at GitHub .NET Core, Angular and MySQL. Part 8 – Source Code

This post is divided into several sections:

Creating a Navigation Menu

In the app folder, create a new folder and name it “menu”. After that create these files:

  • menu.component.ts
  • menu.component.html
  • and menu.component.css

Then, import the menu component inside the app.module.ts file.

Of course, if you want you may always use the Angular CLI command : ng g component menu

We are going to use Bootstrap classes to implement the navigation menu within the menu.component.html file:

This is how the menu.component.ts file should look like:

And we are going to change our app.component.html file:

Start your angular project by typing ng serve and navigate tohttp://localhost:4200. You should be able to see our menu on the screen:

Menu Angular routing

Configuring Angular Routing

The page with the welcome message is not available anymore because we have changed the app.component.html file. To enable the navigation between all the pages inside this project, we need to configure the routing.

Open the app.module.ts file and modify it:

In this file, we may notice a MenuComponent inside declarations array. It was imported earlier during the creation of the navigation component. Also, check out the RouterModule, which is the module for the Angular routing. We are going to use RouterModule.forRoot to define routes for our application.

When we create more than one module inside the application, we can use the forRoot() function provided by the RouterModule, only in the main(root) module. In this project, it is the app.module file. In all other modules, we must use the forChild() function. The forRoot() function accepts an array of objects as a parameter. Every element of that array consists of the path and the target component for that path. So, the path: ‘home’ means that on the address http://localhost:4200/home we are going to serve the HomeComponent. The other line inside the forRoot function is the default redirection to the home page.

To show the home page, modify app.component.html:

The router-outlet is a container for the routing content. So basically, all the content that exists on the address you are routing to, is going to be presented inside that container.

Now if you navigate to the localhost:4200 you should be able to see the following result:

Home page Angular routing

Styling links

If you want to style your active link in the menu, change your <a> tag:

With the routerLinkActive, we are setting up the CSS class name we want to use to style the active link. Furthermore, the routerLinkActiveOptions is going to allow us to add a class only if there is an exact match of the link and the URL.

Now in the menu.component.css file add the .active class styles:

Creating the Not-Found Component

Excellent.

Now we have the working navigation.

To complete the routing part of this post, we are going to create a component with the name not-found. The application is going to redirect a user to this component when he types a none existing route in the URL.

Let’s start by creating the new folder inside the app folder and name it error-pages. Inside the error-pages folder, we are going to create a folder and name it not-foundInside that folder create all the component files you need.

Be sure not to forget to import this component into our app.module.ts file.

This is the folder structure:

not-found folder structure Angular routing

We can also create this folder structure automatically by typing the command:

Let’s modify the not-found.component.ts file:

Pay attention to the string value of the variable notFoundText. We are not using apostrophes but backticks (`). All the content inside the backticks will be considered as a string, even the apostrophe sign in the string.

Modify the not-found.component.html file:

Modify not-found.component.css file:

Finally, modify the forRoot function in the app.module.ts file:

You may notice two changes. With the first change, we are declaring the path 404 and assigning the component NotFoundComponent to that path. Now our component is going to be visible on the localhost:4200/404. The second change means that whenever you search for any route that doesn’t match any of our defined routes, the application redirects you to the 404 page.

Note that the best practice for large projects is to keep router array in the separate file, but for the sake of the simplicity of this example, we are keeping it inside the forRoot function. If you still want to create a separate routing module, you can learn more about it here: Angular Material Navigation and Routing.

Typing localhost:4200/whatever should return the following result:

not-found page Angular component

Conclusion

As you might have noticed, creating the menu and using the routing in the angular project is pretty straightforward. Although we are not creating a large project, it is quite big enough to demonstrate the usage, configuration, and routing of all the pages we currently have. Of course, we are going to create routes for all new pages that we introduce to our project.

By reading this post you’ve learned:

  • How to create a navigation menu
  • How to create and configure the routing
  • The way to style the route links

Thank you for reading the post, hopefully, it was helpful to you.

In the next part of the series, I am going to show you how to fetch the data and consume the API with the HTTP and Observables.

If you have enjoyed reading this article and if you would like to receive the notifications about the freshly published Angular content we encourage you to subscribe to our blog.