Angular 10 Tutorial - Nested Routing and Child Routes

In this tutorial, we are going to learn about Nested or Child Routes in Angular 10. Nested routes are routes within other routes. The Angular framework allows us to nest child routes under another child route, effectively creating a tree of routes. So, let's see how we can create a child route or nested route and display the child components.

Creating Components for Nested Routing

First of all, let's create some components. For that, switch to the command prompt and run the following commands:

ng g c components/products
ng g c components/product

And also create two more components for nesting inside the product component:

ng g c components/overview
ng g c components/details

Configuring Routing

Now, switch to the project and open the app-routing.module.ts file. Inside this file, import the components:

import {ProductsComponent} from './components/product/products.component';
import {ProductComponent} from './components/product/product.component';
import {OverviewComponent} from './components/overview/productoverview.component';
import {DetailsComponent} from './components/details/productdetails.component';

Now, add the routes:

{
    path: 'products',
    component: ProductsComponent
},
{
    path: 'products/:id',
    component: ProductComponent,
    children: [
        { path: 'overview', component: OverviewComponent },
        { path: 'details', component: Details Component }
    ]
}

Creating a Product Array

Now, go to the products.component.ts file and let's create a product array. So, just write:

products = [
    {id:1,name:'Laptop'},
    {id:2,name:'Mobile'},
    {id:3,name:'Tablet'}
];

Displaying Products

Now, go to the products.component.html file and here, just print all products in a list. So, here, just add the ul tag:

<ul>
    <li *ngFor="let product of products"><a [routerLink]="" (click)="gotoProduct('products',product.id)">{{product.name}}</a></li>
</ul>

Adding Links to Products

Now, add a link with each product. So, just create a function inside the products.component.ts file. First of all, import the router:

import {Router} from '@angular/router';
constructor(private router:Router) { }
    public gotoProduct(url, id) {
    this.router.navigate([url, id]);
}

Now, let's bind this function to the product. So, just write:

(click)="gotoProduct('products', product.id)"

Creating a Child Route

Now, open the product.component.ts file and here, create a property:

productId = 0;

And:

import {ActivatedRoute} from '@angular/router';
productId = '';
constructor(private route:ActivatedRoute) { }
ngOnInit(): void {
    this.productId = this.route.snapshot.params.id;
}

Now, just print this id. So, just open the singleproduct.component.html file and here, add:

<h1>Selecte Product Id : {{productId}}</h1>

Configuring Child Route

Now, let's create a child route. So, just open the app-route.module.ts file and here, inside this route, just write:

{
    Path:'product/:id'
    Component:ProductComponent
    children: [
        { path: 'overview', component: ProductOverviewComponent }
        { path: 'detail', component: ProductDetailComponent }
    ],
}

Adding Links to Child Route

Now, let's add two links inside the single product component. Just go to the singleproduct.component.ts file and just add links for the overview and details:

<p>product works!</p>
<a routerLink="" (click)="gotoProduct('products', productId, 'overview')" class="btn btn-primary">Details</a>
<h1>Select Product Id : {{productId}}</h1>
<a routerLink="" (click)="gotoProduct('products', productId, 'details')" class="btn btn-primary mr-2">Overview</a>
<router-outlet></router-outlet>

Creating a Function for Child Route

Now, let's create a function inside the product.component.ts file:

import { Component, OnInit } from '@angular/core';
import {Router, ActivatedRoute} from '@angular/router';
@Component({
    selector: 'app-product',
    templateUrl: './product.component.html',
    styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit { 
    productId='';
    constructor(private router:Router,private route:ActivatedRoute) { }
    ngOnInit(): void {
        this.productId = this.route.snapshot.params.id;
    }

    gotoProduct(url,id,cmp){
        this.router.navigate([url,id,cmp]);
    }
}

Now, add this function to the details and overview link. So, here, just write:

<p>product works!</p>
<h1>Select Product Id : {{productId}}</h1>
<a routerLink="" (click)="gotoProduct('products', productId, 'overview')" class="btn btn-primary">Details</a>
<a routerLink="" (click)="gotoProduct('products', productId, 'details')" class="btn btn-primary mr-2">Overview</a>
<router-outlet></router-outlet>

Testing Nested Routing

All done! Let's check this. Switch to the browser and here you can see the product link. Now, click on it. Here you can see the product list. Now, click on any link, and here you can see the two links, overview and details. If I click here, you can see the component text is showing here. These components are nested with the product component.