Angular - Nested Routes

This chapter will discuss, what is Nested Routes and Nested Routing in Angular, including its syntax, usage and example of using in real-time angular project.

Nested Routes in Angular

In Angular, nested routes are used to define hierarchical routes for components. This technique allows you to load a specific child component only when its parent component is loaded.

For example, if you want to load all the items within the ItemsComponent, you can use a route like /items/item-lists/, where the "item-list" is nested within the "items routes".

When the <router-outlet> directive is used in a component other than the root component, it allows you to display child routes within that component, and those routes will be considered child routes of the parent component. This concept is known as nested routing, and it can be achieved by implementing nested routes.

Syntax of Angular Nested Routes

Below is the syntax to create Nested Routes in Angular −

const routes: Routes = [
  {
    path: 'parent',
    component: ParentComponent,
    children: [
      {
        path: 'child1',
        component: Child1Component
      },
      {
        path: 'child2',
        component: Child2Component
      }
    ]
  }
];

Here,

• path: It specifies the URL segment for the route.
• component: It defines the component to be rendered for the route.
• children: An array of child routes nested under the parent route.

Note: The nested URL will be: "/parent/child1" and "/parent/child2".

Example - Angular Nested Routes

Below is a example of using the Nested Routes in a Angular project −

Step 1: Define Nested Routes for your application

app.routes.ts

import { Routes } from '@angular/router';
import { Home } from './home/home';
import { About } from './about/about';
import { ViewItem } from './view-item/view-item';
import { PageNotFound } from './page-not-found/page-not-found';
import { EditItem } from './edit-item/edit-item';

export const routes: Routes = [
   {path: 'home', component: Home},
   {path: 'about', component: About},
   {path: 'item', children:[
      {path: 'view/:id', component: ViewItem},
      {path: 'edit/:id', component: EditItem},
   ]},
   {path: '**', component: PageNotFound}
];

Step 2: Add your routes to your application

app.html

<h1>Angular Routing</h1>
<a routerLink="/home">Home</a><br />
<a routerLink="/about">About</a><br />
Item1: <a routerLink="/item/view/1">View Item1</a> <a routerLink="item/edit/1">Edit Item1</a><br />
Item2: <a routerLink="item/view/2">View Item2</a> <a routerLink="item/edit/2">Edit Item2</a><br />
<router-outlet></router-outlet>

Step 3: Access 'id' parameter in ViewItem Component and EditItem Component

view-item.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, RouterOutlet } from '@angular/router';

@Component({
   selector: 'app-view-item',
   imports: [],
   templateUrl: './view-item.html',
   styleUrl: './view-item.css',
})
export class ViewItem implements OnInit{
   id: any;
   constructor(private route: ActivatedRoute){}
   ngOnInit(): void {
      this.route.paramMap.subscribe(res=>{
        this.id = res.get('id');
      });
   }
}

edit-item.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, RouterOutlet } from '@angular/router';

@Component({
   selector: 'app-edit-item',
   imports: [],
   templateUrl: './edit-item.html',
   styleUrl: './edit-item.css',
})
export class EditItem implements OnInit{
   id: any;
   constructor(private route: ActivatedRoute){}
   ngOnInit(): void {
      this.route.paramMap.subscribe(res=>{
        this.id = res.get('id');
      });
   }
}

Output

Now run the application and see the output for Nested Routes

By observing the URL in the above GIF, you can clearly see that the View and Edit components are only loaded when the Item route is activated. In the context of Angular, the child components (View and Edit) are rendered only within the parent Item route.