Angular : Child Routes / Nested Routes

In this tutorial, we look at how to add a child or nested routes to an Angular route. Child Routes or Nested routes are a powerful new feature in the Angular router. Nested routes are routes within other routes. In this tutorial, we will show you how to create a child route and display the child components. The Angular allows us to nest child routes under another child routes effectively creating a Tree of routes.

Child Routes / Nested Routes

The Angular applications are based on the idea of Components. The Components follows a Tree structure, where we have a root component at the top. We can then add child components forming loosely coupled components resembling a Tree

The Routes in Angular also follows the component tree structure and allows us to define the nested or child routes.

Example

Consider the following Component Tree

In the above example, the ProductComponent displays the list of Products. The ProductDetailsComponent is the child of the ProductComponent displays the details of the selected Product.

So Our routes would be /Product and /Product/Details/:Id

How to Create Child Routes / Nested Routes

This tutorial builds on the app we have built in the Passing Parameters to Route Tutorial. You can download the code from gitHub.

We already have created ProductDetailsComponent, but it is not designed as the child route of the ProductComponent. Let us update the code make it child route of the Product route.

Define the Routes

Open the app.routing.ts file

You will see the following routes defined in our application.

Here the ProductDetailComponent is the sibling of the ProductComponent and not its child

To make ProductDetailComponent as the child of the ProductComponent, we need to add the children key to the product route, which is an array of all child routes as shown below

The child route definition is similar to the parent route definition. It has a path and component that Angular Router uses to render when the user navigates to this child route.

In the above example, the parent route path is ‘product’ and the child route is ‘detail/:id’

This is will match the URL path “/product/detail/id”.

When the user navigates to the “/product/detail/id”, the router will start to look for a match in the routes array

It starts off the first URL segment that is ‘product’ and finds the match in the path ‘product’ and instantiates the ProductComponent and displays it in the <router-outlet> directive of its parent component ( which is AppComponent)

The router then takes the remainder of the URL segment ‘detail/id’ and continues to search for the child routes of Product route. It will match it with the path ‘detail/:id’ and instantiates the ProductDetailComponent and renders it in the <router-outlet> directive present in the ProductComponent

Final app.routing.ts looks like this

Display the component using Router-outlet

The components are always rendered in the <RouterOutlet> of the parent component.

For ProductDetailComponent the parent component is ProductComponent and not the AppComponent

Hence, we need to add <router-outlet></router-outlet> in the product.component.html as shown below

There is no change in the Product Detail Component.

Note that we are using the snapshot method to retrieve the route parameter id.

Testing the Nested/Child Route

Run the app and click on the Product link. You will see that the Product Page is displayed. Click on any of the Product, and you will see the Product details page is displayed

Why subscribe to route params

Now, click on another product, and you will notice that the Product details page does not get updated with the new product.

Why?

Because the angular does not create the component if it is already present in the DOM. It reuses the component instance

This implies that the ngOnInit life cycle hook is not invoked when the user navigates to the component again. We are retrieving the parameter value in the ngOnInit using the snapshot method. Hence our component does not update itself.

This issue can be rectified by subscribing to the observable params property. Our component will be notified, whenever the value of the parameter changes. So that we can update the component accordingly.

Using the Subscribe method to retrieve the parameters in child routes

Now, open the product-detail.component.ts and change the ngOnInit method to subscribe to the params property as shown below

sub;

We need to unsubscribe when the component is destroyed so as to stop the memory leakage

Now, you will see that as you click on another product, the ProductDetailComponents updates itself.

Nesting Children’s under a child

We can add child routes to a child route.

For Example, What if we want to show Product Overview & Specification under the Product Details Page. Our Component Tree is as shown below

Defining the child Route

First, we need to add three child routes under the Product/Details route as shown below

The first two child routes are simple. We map ‘Overview’ path to the ProductOverviewComponent & ‘spec’ URL path to the ProductSpecComponent

The Url would become ‘/product/detail/:id/overview’ and ‘/product/detail/:id/spec’

The last route is an empty path which is redirects to the Overview route. Note that we have set pathMatch to ‘full’

Mapping the action to View

The updated code for Product Details page is shown below

We are using a relative path to while binding path to the routerlink directive. Absolute paths will begin with a forward slash /. When using the relative path, the router will append the path to the parent route path to construct the final URL.

The Angular Router renders both ProductOverviewComponent & ProductSpecComponent inside the ProductDetailComponent. Hence we need to add <router-outlet></router-outlet> in the Template of ProductDetailComponent

The Child Components

The ProductOverviewComponent just displays the text “Overview of <Name of the Product>” Message.

The most important point is how we retrieve the product id from the route. We are subscribing to the params array of the parent component.

ProductSpecComponent is similar to the above

Finally, do not forget to import both the components in app.routes.ts & app.module.ts

Summary

We looked at how to create child/nested routes in angular.