30. Absolute and Relative Paths

In Angular, absolute and relative paths are used to navigate between routes, depending on how the path is defined and the current route context.

1. Absolute Path

An absolute path begins from the root of the application and is specified with a / at the beginning. It is used to navigate directly to a specific route.

Example:

To navigate to the About component using an absolute path, you can define the route as /about in your app-routing.module.ts.

app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AboutComponent } from './about/about.component';
import { HomeComponent } from './home/home.component';
 
const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
];
 
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

Navigation to About using Absolute Path:

In your template (HTML), you can navigate to the About component using the absolute path:

<a [routerLink]="'/about'">Go to About</a>
<router-outlet></router-outlet>

Here, the /about path refers to the root of the application, making it an absolute path.

---

2. Relative Path

A relative path is relative to the current route. It does not start with a / and is used when navigating within the same route hierarchy, often inside child routes.

Example:

In a parent route, you can navigate to a child route using a relative path.

app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AboutComponent } from './about/about.component';
import { HomeComponent } from './home/home.component';
import { DetailsComponent } from './details/details.component';
 
const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'details', component: DetailsComponent }
];
 
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

Navigation to Details from About using Relative Path:

In the AboutComponent, you can use a relative path to navigate to the Details component (relative to the current route):

<!-- about.component.html -->
<a [routerLink]="['/details']">Go to Details</a> <!-- Absolute Path Example -->
<!-- OR -->
<a [routerLink]="['details']">Go to Details (Relative)</a> <!-- Relative Path Example -->

In this case, the relative path will navigate based on the current route context. If the About component is being displayed, ['details'] will resolve to /details.

---

3. Understanding Relative Path Behavior

• Absolute Path always starts with / and will navigate to the root of the app (from the root URL).
• Relative Path is used within the context of the current route. It doesn’t need the / prefix and is resolved relative to the current path.

Example of Using Relative Path Inside a Nested Route (Child Route):

If the AboutComponent has a child route, you can use relative path navigation:

const routes: Routes = [
  { path: '', component: HomeComponent },
  { 
    path: 'about', 
    component: AboutComponent,
    children: [
      { path: 'details', component: DetailsComponent }
    ]
  }
];

In the AboutComponent, navigate to the child route using a relative path:

<!-- about.component.html -->
<a [routerLink]="['details']">Go to Details</a> <!-- Relative to 'about' path -->

This will navigate to /about/details while remaining relative to the parent path.

---

Summary:

• Absolute Path: Starts with a /, navigates directly from the root of the application (e.g., /about).
• Relative Path: Doesn’t start with a /, used for navigating within the current route hierarchy (e.g., details when you’re already on /about).