“Implementing Child Routing in Angular for Nested Components”-(Angular-13)

Gondi
3 min readSep 17, 2024

In Angular, child routing refers to the ability to create routes within other routes, allowing you to define a complex navigation structure. This is useful when you want to have a master-detail view or any scenario where a view has nested sections that need to be routed individually.

Setting Up Child Routes in Angular

Here is how you can set up child routing in Angular step-by-step:

1. Creating the Main and Child Components

Assume you have a main component (MainComponent) and two child components (Child1Component and Child2Component). You can generate these components using Angular CLI:

ng generate component main
ng generate component main/child1
ng generate component main/child2

2. Defining Child Routes in the Routing Module

You need to define the routes for the MainComponent and its child components in the routing module, typically app-routing.module.ts:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { MainComponent } from './main/main.component';
import { Child1Component } from './main/child1/child1.component';
import { Child2Component } from './main/child2/child2.component';

const routes: Routes = [
{
path: 'main',
component: MainComponent,
children: [
{ path: 'child1', component: Child1Component },
{ path: 'child2', component: Child2Component }
]
},
{ path: '', redirectTo: '/main', pathMatch: 'full' } // Redirect to main if no path is provided
];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

3. Adding Router Outlet in Main Component

To allow the display of child components, you need to add a <router-outlet> inside the MainComponent template:

main.component.html

<h2>Main Component</h2>
<nav>
<a routerLink="child1" routerLinkActive="active">Child 1</a>
<a routerLink="child2" routerLinkActive="active">Child 2</a>
</nav>

<!-- Router outlet for child components -->
<router-outlet></router-outlet>

4. Adding Router Links to Navigate to Child Routes

To navigate to child routes, you use routerLink within the main component. The routes are relative to the parent component's path:

main.component.html (continued)

<nav>
<a routerLink="child1" routerLinkActive="active">Child 1</a>
<a routerLink="child2" routerLinkActive="active">Child 2</a>
</nav>

5. Using Relative Paths for Child Routes

When navigating to child routes, the paths are relative to the parent route. If you want to navigate programmatically to a child route, you can use Angular’s Router:

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
selector: 'app-main',
templateUrl: './main.component.html'
})
export class MainComponent {
constructor(private router: Router) { }

navigateToChild1() {
this.router.navigate(['child1'], { relativeTo: this.router.url });
}
}

6. Resulting Structure

Now, the application should have a structure like this:

  • /main - Shows the MainComponent
  • /main/child1 - Shows the Child1Component inside the MainComponent
  • /main/child2 - Shows the Child2Component inside the MainComponent

Example Folder Structure

Your folder structure might look like this:

src
├── app
│ ├── main
│ │ ├── main.component.ts
│ │ ├── main.component.html
│ │ ├── child1
│ │ │ ├── child1.component.ts
│ │ │ └── child1.component.html
│ │ ├── child2
│ │ │ ├── child2.component.ts
│ │ │ └── child2.component.html
│ ├── app-routing.module.ts
│ ├── app.module.ts

Summary

  • Define child routes using the children property in the parent route.
  • Use <router-outlet> in the parent component to render child routes.
  • Use relative paths with routerLink to navigate to child routes.

This structure allows you to create nested navigation in your Angular application efficiently.

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

No responses yet

Write a response