“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.

--

--

No responses yet