In this tutorial we are going to learn about Nested or Child Routes
Nested routes are routes within other routes.
The Angular allows us to nest child routes under another child routes effectively creating a Tree of routes.
so lets see how can we create a child route or nested route and
display the child components.
First of all lets create some components
For that switch to the command prompt and run following commads.

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

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

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

Now switch to project
And just open 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 }
    ]
}

Now go to the products.component.ts file
And lets create a product array
So just write here

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

Now go to the products.components.ts file and here
Just print all product in 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>

Now add the linke with each project
So just create a function inside products.components.ts file
First of all import the router here just write

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

Now lets bind this function the product so just write

(click)="gotoProduct('products',product.id)"
Now open product.component.ts file
And here create property

productId = 0;

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 singleproduct.component.html file and here add

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

Now lets create child route
So just open app-route.module.ts file
And here inside this route
Just write here

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

Now lets add two link inside the singleproduct component
Just goto the singleproduct.component.ts file
And just add link for the overview an 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>

Now lets create a function iside 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 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>

All done, lets 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 link over view and details
If I click here
You can see the component text is showing here
This componets are nested with product component.