Overview Of Child Routes In Angular

Introduction

In this article, we are going to use child routes in our navigation application. Child routes are used in such scenarios when we require some routes to be rendered or viewed inside other routes. So, when we have such requirements where we have the submodule view kind of requirement, we can go with child view. This is just like the normal view but renders inside some parent view.

Prerequisites

• HTML, CSS, and JS
• Basics of TypeScript
• Route Parameter in Angular with paramMap

Before we start, please go through the creation of an application using a route parameter in Angular with paramMap.

Let us start with the code for better understanding. We will add two Views - fees and address - to be viewed on studentDetails View when we click on the corresponding buttons respectively.

We are going to create two components - StudentAddress and StudentFees component.

 

These two new Views of the above added components will be used as child view for the studentDetails component view.

Open student-address.component.html and add the below code.

<p>
  Address view: This is the address view for the student.
</p>

Open student-fees.component.html and add the following lines.

<p>
  Fees view: This is fees view for the student.
</p>

Open app-routing.component.ts and change the value of routes as below.

const routes:Routes = [
    {path: '', redirectTo : '/student-list', pathMatch : 'full'},
    {path: 'student-list', component : StudentListComponent},
    {path: 'student-list/:id/:name/:marks', component : StudentDetailsComponent,
        children : [
            {path: 'fees', component : StudentFeesComponent},
            {path: 'address', component : StudentAddressComponent}
        ]},
    {path: 'studentMarks', component : StudentMarksComponent},
    {path: 'addStudent', component : StudentComponent},
    {path: "**", component : NotFoundComponent}
];

Open student-details.component.ts and add the below content.

<h2>Selected Student Details</h2>
<p>Id : <b>{{student.id}}</b></p>
<p>Name : <b>{{student.name}}</b></p>
<p>Marks : <b>{{student.marks}}</b></p>
<button (click)="showFees()">Fees</button>
<button (click)="showAddress()">Address</button>
<router-outlet></router-outlet>
<div>
    <button (click)="gotoStudentList()">Back</button>
</div>

Your Child View will render under <router-outlet>. Open student-details.component.ts and add the below code.

import { Component, OnInit } from '@angular/core';
import { StudentService } from '../student.service';
import { ActivatedRoute, Router } from '@angular/router';

@Component({
  selector: 'app-student-details',
  templateUrl: './student-details.component.html',
  styleUrls: ['./student-details.component.css']
})
export class StudentDetailsComponent implements OnInit {

  public student = {
     id: "",
     name: "",
     marks: ""
    };
  constructor(private route : ActivatedRoute, private router : Router) {
  }

  ngOnInit() {
    this.student.id = this.route.snapshot.paramMap.get('id');
    this.student.name = this.route.snapshot.paramMap.get('name');
    this.student.marks = this.route.snapshot.paramMap.get('marks');
  }

  gotoStudentList(){
    this.router.navigate(['../../../',this.student], {relativeTo: this.route});
  }

  showFees(){
    this.router.navigate(['fees'], {relativeTo: this.route});
  }

  showAddress(){
    this.router.navigate(['address'], {relativeTo: this.route});
  }
}

Now, we are all ready to test the Child View in our application.

Run the application.

 

Click on any record.

 

Click on the "Fees" button to see the Child View.

 

You can see the URL changes to http://localhost:4200/student-list/1002/Imran/80/fees

Click on the "Address" button to see the Child View.

 

You can see the URL changes to http://localhost:4200/student-list/1002/Imran/80/address

What we have done above,

1. Created two Child Views - Fees and Address
2. Added the children path (fees and address) on studentDetails component path on our route's component that we created in app-routes.module.ts.
3. Added <router-outled> tag to handle and render the Child View inside the studentDetails View.
4. Also, added the clickable button to navigate to the child view with its handler function.

So, these are the child routes (fees and address) that are displayed within the studentDetails Component View. You can also use the wildcard child route to handle the unknown URL.