Relative Navigation In Angular

Introduction

In this article, we are going to learn the relative navigation in the Angular application. While building the application with the use of absolute path we pin the same link everywhere we need it in that path. So when we change the parent route then we have to change the path to reflect the links used outside also. So by the use of relative path you are making your links free that are relative to the current URL segment. Your feature area of routing will be the same even if you change the route for the parent. You are just making your link free even if you change the parent route path.

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 the route parameter in Angular with paramMap.

The path we are using so far was absolute and it begins with ‘/’ forward slash. If you take a look at the path used in student-list.component.html we used.

//studentDetails

And in student-details.component.ts we used.

gotoStudentList(){
    this.router.navigate(['/studentList', this.student])
  }

/studentList for navigation from one view to another. So when we are using an absolute path we are lacking the flexibility of routing in the application.

Let us modify out the application for better understanding.

Open app-routing.module.ts and change the routes value as below:

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

Suppose you just got a small change in your application say we change the path ‘studentList’ to ‘student-list’ in the routing module.

Run the application:

The first route is correct and displays the list of students.

 

The second route to display the details with the back button.

 

Click on the back button,

 

You can see the page you are looking for is not found. This is because we have changed the route path without changing all its occurrences.

So to make it work we have to change the occurrences we have used in navigating off the page.

Change the below route in student-details.component.ts

From:

this.router.navigate(['/studentList', this.student])

To:

this.router.navigate(['/student-list', this.student])

To make it work.

Now, run the application and see all routes will work fine. So the routing is good but it lacks a bit of flexibility. On every single change in route requirements, it requires you to change the calling references also. So for flexibility in usage, we will use relative routing.

Let us add the code for relative navigation.

Open student-details.component.ts and change the contents of method gotoStudentList()

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

The navigate method takes two arguments. The first one is the link parameters array; within this we specify the path first then optional parameters. The link and optional parameters will be relative to this.route.

We have used ‘../../../’ three times; i.e., from http://localhost:4200/student-list/1001/Irshad/90 to http://localhost:4200/student-list with optional parameters.

Now, run the application and you can see your links are working properly with the correct URL path.