Angular - Route Redirects and Relative Paths

Angular is a popular front-end framework made by Google. Like other popular front-end frameworks, it uses a component-based architecture to structure apps.

In this article, we’ll look at how to add routing to our Angular app.

Setting up Redirects

We can set up redirects within our Angular app with the redirectTo property.

For example, we can write:

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { FirstComponent } from './first/first.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
import { SecondComponent } from './second/second.component';

const routes: Routes = [
  { path: 'first-component', component: FirstComponent },
  { path: 'second-component', component: SecondComponent },
  { path: '', redirectTo: '/first-component', pathMatch: 'full' },
  { path: '**', component: PageNotFoundComponent },
];

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

If we go to the / path, we go to the /first-component path because of the redirectTo property.

The pathMatch property is set to 'full' so the full path has to be matched before the redirect is done.

Nesting Routes

We can add nested routes by adding the children property.

For example, we can write:

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ChildAComponent } from './child-a/child-a.component';
import { ChildBComponent } from './child-b/child-b.component';
import { FirstComponent } from './first/first.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
import { SecondComponent } from './second/second.component';

const routes: Routes = [
  {
    path: 'first-component', component: FirstComponent, children: [
      {
        path: 'child-a',
        component: ChildAComponent,
      },
      {
        path: 'child-b',
        component: ChildBComponent,
      },
    ],
  },
  { path: 'second-component', component: SecondComponent },
  { path: '', redirectTo: '/first-component', pathMatch: 'full' },
  { path: '**', component: PageNotFoundComponent },
];

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

to add the child routes with the children property.

Then in first.component.html , we add:

<p>first works!</p>
<router-outlet></router-outlet>

so that we can see the child routes.

Now when we go to /first-component/child-a , we get:

first works!

child-a works!

And if we go to /first-component/child-b , we get:

first works!

child-b works!

Using Relative Paths

We can define relative paths in our router links.

For example, we can write:

child-a.component.html

<nav>
  <ul>
    <li><a routerLink="../child-b">child b</a></li>
  </ul>
</nav>
<p>child-a works!</p>

Then the link will go to the /first-component/child-b path.

We can also do this programmatically.

For example, we can write:

child-a.component.html

<button (click)='goToChildB()'>child-b</button>
<p>child-a works!</p>

child-a.component.ts

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

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

  constructor(
    private router: Router,
    private route: ActivatedRoute
  ) { }

  ngOnInit() {
  }

  goToChildB() {
    this.router.navigate(['../child-b'], { relativeTo: this.route });
  }

}

We call goToChildB when we click on the child-b button.

In goToChildB , we call this.router.navigate to go to the ../child-b route.

The relativeTo property sets the path that the relative path is relative to.

Conclusion

We can go to a relative path with Angular’s router.

Also, we can set up redirects to go to a path.