In this section, we are going to continue from the last section and will get started with Child Routes aka Nested Routes. Nested routes is the concept of containing routes within other routes. With nested routes we’re able to encapsulate the functionality of parent routes and have that functionality apply to the child routes. This is one of the nice ways to isolate different functional areas. Otherwise, imagine your base routes will grow like anything. I have configured the routes in such a way that all reviews now sit under location. Below, I have pasted modified structure of app.
As you can see above, I have isolated reviews. Now, let’s see implementation for same. First of all, I have implemented the same in app.module.ts
Here, in the code, I have imported my sub module which is ReviewsModule here. Also, in app.module, I have provided children info in reviews route. Here, in children basically I am referring to my childRoutes which is basically alias of my routes sitting in ReviewsModule. With that being said, let’s have a look at ReviewsModule.
This is pretty simple code. First of all it contains all my route info, then I am exporting my routes, components and class off-course, so that we can import the same in our parent module. Now, these are basic things. Now, you must be knowing all these facts. Also, Other components are just basic components. I don’t really see any reasoning to explain the same. Hence, let me explain the functionality itself. Notice here that we have an empty path on the first path. We do this so that when we visit /reviews, we’ll be redirected to the main route. Other paths are quite simple.
Also in order to populate the page <router-outlet> is required. In this case, it is mentioned in reviews.component.html. Below is the snippet for the same.
Now, let’s see them in action. Here is the home page as usual.
Now, when we click on Reviews tab, it will present below UI.
It gets redirected to main route. Now, here we have three sub routes. Therefore, if we click on let’s say 1st sub tab, it will print the below info.
Similar thing will happen, when I click on 2nd route. Now, let’s try third route, which is parameterized one. Here, when I enter any number and click on GO button. This will print below stuff.
This is how child routes work. Now, let’s look some other features. Let’s say we try to navigate to something like http://localhost:4200/something. Since, this doesn’t qualify any routes, hence this will give below error like shown below.
In order to fix this kind of scenario, we can implement one route, which will basically return not found page, in case if doesn’t find any matching route like shown below.
Here, ‘**’ is the wildcard operator which basically returns for any combination which is not valid. Hence, with this change in place, when I try to execute the same route this will give below message.
Note:- This wild card route is pretty greedy, hence it will match everything and anything hence never put this route on top of the route collection. Otherwise, all routes will end-up landing on not-found page only. Routing works Top-To-Bottom, hence its necessary to keep the same at bottom of the route configuration.
Download Link:- https://github.com/rahulsahay19/Angular-Routing/tree/Nested-Routes
Thanks,
Rahul Sahay
Happy Coding
