Angular Relative Navigation

blog@martdegraaf.nl (Mart de Graaf) — Thu, 25 Apr 2024 07:47:30 +0200

For a project, we have routes that live in states. We wanted to navigate to a route relative to the current route. for each child route, we will be able to navigate to the previous and next route.

System context

Let’s say we have a app-routing.module.ts with the following routes:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


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

Router.navigate

We do not want to edit the url property, because it can lead to complexity. You would just say Angular does have the router to do so. The current route is a chain of activated routes when you are navigating to url like /parent/child1/child2/child3.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


//Inside Some component

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

navigate() {
  let lastChildRoute = getLastActivatedRouteInChain(this.activatedRoute);
  this.router.navigate(['../child2'], { relativeTo: lastChildRoute });
}

To get the activated route for for example child3 when the url is /parent/child1/child2/child3 we need to get the last child route in the chain. This ActivatedRoute object is passed to the relativeTo property of the router.navigate method.

1
2
3
4
5
6
7


export const getLastActivatedRouteInChain = (activatedRoute: ActivatedRoute): ActivatedRoute => {
  let lastRoute = activatedRoute;
  while (lastRoute.firstChild) {
    lastRoute = lastRoute.firstChild;
  }
  return lastRoute;
};

Conclusion and discussion

This way we can navigate to a route relative to the current route. This is useful when you have a wizard-like flow in your application.

Routing on Mart's blog

Angular Relative Navigation

System context

Router.navigate

Conclusion and discussion

Further reading