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

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.