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

Child Routes

Next ►
►

In this section, we will explore 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. RouterOutlet: Using multiple <router-outlet> directives to display nested routes.
  4. Route Configuration: Setting up the route configuration for child routes.

  1. 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 for more organized and manageable routing.

Example Structure

/parent
  /parent/child1
  /parent/child2

  1. Nested Routes

To define nested routes, you need to configure the children property in the route configuration of the parent route.

Example

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ParentComponent } from './parent/parent.component';
import { Child1Component } from './child1/child1.component';
import { Child2Component } from './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 { }

In this example, ParentComponent is the parent route, and Child1Component and Child2Component are the child routes.

  1. RouterOutlet

To display the child routes, you need to use the <router-outlet> directive in the parent component's template.

Example

<!-- 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>

In this example, the <router-outlet> directive in ParentComponent will display the child components based on the active route.

  1. Route Configuration

Ensure that your route configuration is correctly set up to handle child routes. The children property is used to define the nested routes.

Example

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

Practical Exercise

Task

  1. Create a new Angular component named ParentComponent.
  2. Create two new Angular components named Child1Component and Child2Component.
  3. Configure the routes to nest Child1Component and Child2Component under ParentComponent.
  4. Add navigation links in ParentComponent to navigate to Child1Component and Child2Component.
  5. Use <router-outlet> in ParentComponent to display the child components.

Solution

  1. Create Components
ng generate component parent
ng generate component child1
ng generate component child2
  1. Configure Routes
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ParentComponent } from './parent/parent.component';
import { Child1Component } from './child1/child1.component';
import { Child2Component } from './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 { }
  1. Add Navigation Links
<!-- 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>

Summary

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

  • The concept of parent and child routes.
  • How to define and configure nested routes using the children property.
  • Using the <router-outlet> directive to display child components.
  • Practical exercise to reinforce the learned concepts.

By understanding and implementing 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 manage access control.

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