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 this series, check out the following link: Introduction page for this tutorial.

For the previous part check outPart 7 – Creating Angular4 client side – Preparing the project and creating the first component

The source code is available at GitHub .NET Core, Angular 4 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.

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 to the http://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 forChildren() 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


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.

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

not-found page Angular component


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.

For any suggestions or questions, don’t hesitate to leave the comment in the comment section below.