The Project | About Us | Contribute | Donations | License
HOME My courses Completed
◄ Previous
◄

Child Routes

Next ►
►

In this section, we will explore the concept of child routes in Angular. Child routes allow you to create nested routes within a parent route, enabling more complex and hierarchical navigation structures in your Angular applications.

Key Concepts

  1. Parent and Child Routes: Understanding the relationship between parent and child routes.
  2. Nested Routes: How to define and configure nested routes.
  3. Router Outlet: Using multiple router outlets to display nested views.
  4. Route Configuration: Setting up child routes in the route configuration.

Understanding Parent and Child Routes

Parent routes are the main routes in your application, while child routes are nested within these parent routes. This hierarchical structure allows you to create complex navigation patterns.

Example Structure

/parent
  /parent/child1
  /parent/child2

In this example, /parent is the parent route, and /parent/child1 and /parent/child2 are child routes.

Setting Up Child Routes

To set up child routes, you need to define them in the route configuration of the parent module.

Step-by-Step Guide

  1. Create Components: Create the parent and child components.
  2. Define Routes: Define the parent and child routes in the route configuration.
  3. Configure Router Outlet: Use <router-outlet> in the parent component to display child components.

Example

1. Create Components

Create a parent component and two child components.

ng generate component parent
ng generate component parent/child1
ng generate component parent/child2

2. Define Routes

Define the routes in the app-routing.module.ts file.

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

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

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

3. Configure Router Outlet

Use <router-outlet> in the parent component's template to display the child components.

<!-- parent.component.html -->
<h2>Parent Component</h2>
<nav>
  <a routerLink="child1">Child 1</a>
  <a routerLink="child2">Child 2</a>
</nav>
<router-outlet></router-outlet>

Practical Example

Let's see a complete example with the parent and child components.

Parent Component

// parent.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent { }
<!-- parent.component.html -->
<h2>Parent Component</h2>
<nav>
  <a routerLink="child1">Child 1</a>
  <a routerLink="child2">Child 2</a>
</nav>
<router-outlet></router-outlet>

Child 1 Component

// child1.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-child1',
  templateUrl: './child1.component.html',
  styleUrls: ['./child1.component.css']
})
export class Child1Component { }
<!-- child1.component.html -->
<h3>Child 1 Component</h3>

Child 2 Component

// child2.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-child2',
  templateUrl: './child2.component.html',
  styleUrls: ['./child2.component.css']
})
export class Child2Component { }
<!-- child2.component.html -->
<h3>Child 2 Component</h3>

Practical Exercise

Task

  1. Create a new parent component named dashboard.
  2. Create two child components named overview and details.
  3. Set up child routes for overview and details under the dashboard route.
  4. Add navigation links in the dashboard component to navigate to overview and details.

Solution

  1. Create Components
ng generate component dashboard
ng generate component dashboard/overview
ng generate component dashboard/details
  1. Define Routes
// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DashboardComponent } from './dashboard/dashboard.component';
import { OverviewComponent } from './dashboard/overview/overview.component';
import { DetailsComponent } from './dashboard/details/details.component';

const routes: Routes = [
  {
    path: 'dashboard',
    component: DashboardComponent,
    children: [
      { path: 'overview', component: OverviewComponent },
      { path: 'details', component: DetailsComponent }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
  1. Configure Router Outlet
<!-- dashboard.component.html -->
<h2>Dashboard Component</h2>
<nav>
  <a routerLink="overview">Overview</a>
  <a routerLink="details">Details</a>
</nav>
<router-outlet></router-outlet>

Summary

In this section, we learned about child routes in Angular. We covered the following key points:

  • Understanding the relationship between parent and child routes.
  • Setting up nested routes in the route configuration.
  • Using <router-outlet> to display child components.

By mastering child routes, you can create more complex and hierarchical navigation structures in your Angular applications. In the next section, we will explore route guards to protect routes and control access based on certain conditions.

◄ Previous
◄
Next ►
►
The Project | About Us | Contribute | Donations | License
© Copyright 2024. All rights reserved