Angular 2 Router How To Build a Navigation Menu — Bootstrap 4, Nested Routes and Nested Auxiliary Routes
In this post we are going to learn how to use several features of the Angular 2 Router in order to build a navigation system with multiple levels, similar to what you would find in an online learning platform or an online store like Amazon (but simpler).
We will do this step by step, the goal is to learn how to configure the Angular 2 Router by example and implement some very common routing scenarios that you will probably need in just about any application.
The menu was implemented using Bootstrap 4 and the sample code can be found here in this demo repo.
Routing Scenarios Covered
We are going to combine many features of the Router in order to build our menu, namely:
- Initial Router Setup
- Child Routes
- Nested Child Routes
- Auxiliary Routes
- Nested Auxiliary Routes
But mostly we are going see how all the above scenarios can be easily implemented using the powerful Angular 2 Router configuration and navigations APIs.
We are going to learn how these terms that we often use to describe these scenarios like Nested Routes etc. do not have a direct correspondence in the router config, instead they are implemented with more powerful and generic constructs.
So let’s get started, If you would like first to get an introduction to the Angular 2 Router, you might want to have a look at this previous post Angular 2 Router Introduction — Child Routes, Auxiliary Routes, Avoid Common Pitfalls.
The Menu System That We Are About To Build
This is how the menu system will look like:
We will have the following navigation elements:
- a top menu
- A navigation breadcrumb
- A side navigation menu, that only is displayed when we navigate into
Courses - navigation from the courses categories list to the course category, adapting the content of the side bar
