Nested Routes
Written By: Avinash Malhotra
Updated on
Angular Routing also supports Nested Routing. In Nesting Routes, we can create nested routes inside component. These nested routes are relative to parent component only.
To create this, add two more components, product1 and product2 first. Then we have to create another <router-outlet></router-outlet> in product component. The childRoutes will be displayed in <router-outlet></router-outlet> of product component.
Nested Routing
In the example below, we are create two more components, p1 and p2 as child components of product component.
app.routes.ts
Add children property in product path, followed by pathname and component name.
<!--app.routes.ts-->
import { Routes } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { ProductComponent } from './product/product.component';
import { ErrorComponent } from './error/error.component';
import { HomeComponent } from './home/home.component';
export const routes: Routes = [
{ path: '', component:HomeComponent, pathMatch:'full'},
{ path: 'login', component:LoginComponent},
{ path:'product', component:ProductComponent,children:[
{ path: 'p1', component:P1Component,},
{ path: 'p2', component:P2Component,},
] },
{ path:'**', component:ErrorComponent},
];
product.component.ts
Import RouterOutlet and RouterLink in product.component.ts and import them in @Component decorator.
<!--product.component.ts-->
import { Component } from '@angular/core';
import { RouterOutlet, RouterLink } from '@angular/router';
@Component({
selector: 'app-product',
standalone: true,
imports: [RouterOutlet, RouterLink],
templateUrl: './product.component.html',
styleUrl: './product.component.css'
})
export class ProductComponent {
}
product.component.html
Add another nav element in product.component.html with routerLink. Add another router-outlet in product.component.html
<!--product.component.html-->
<p>product works!</p>
<nav>
<a routerLink="p1"></a>
<a routerLink="p2"></a>
</nav>
<router-outlet></router-outlet>