Navigate relative with Angular 2 Router (Version 3)

Question

How to navigate relative from /questions/123/step1 to /questions/123/step2 within a component using Router without string concatenation and specifying /questions/123/?

I've added an own answer below. Please feel free to suggest a better answer. ;-) I guess there are better approaches.

score 137 · Accepted Answer · edited May 02 '22 at 16:11

137

After doing some more research I came across with

this.router.createUrlTree(['../step2'], {relativeTo: this.activatedRoute});

and

this.router.navigate(['../step2'], {relativeTo: this.activatedRoute});

First approach (Router.createUrlTree API) did not work for me, i.e. nothing happened. Second approach (Router.navigate API) works.

Update 2016-10-12

There is another stackoverflow question as well:

How do I navigate to a sibling route

Update 2016-10-24

Documentation:

Routing & Navigation (Relative Navigation)

Update 2019-03-08

It seems that there were changes in Angular 7.1. There is an answer in another post how to solve it with Angular 7.1. Please refer to https://stackoverflow.com/a/38634440/42659.

edited May 02 '22 at 16:11

Raphaël Balet

6,334
6
41
78

answered Aug 24 '16 at 14:15

Thomas

8,357
15
45
81

according to my test it should be `this.router.navigate(['step2'], {relativeTo: this.activatedRoute});` without ../ before path. – Xin Meng Oct 18 '17 at 09:33
1

@XinMeng the ../ is specific to this example, here the goal is trying to go up one level, and then add step2. so for example `/parent/child` would become `/parent/step2` whereas in your example it becomes `/parent/child/step2`. Your example is valid code as well, but for the specific question asked the answer is correct. – Joo Beck Dec 14 '17 at 16:59
One gotcha I had was the ActivatedRoute doesn't know about the current route if the class you're injecting it into has `@Injectable({providedIn:'root'})`. – IBN Jun 10 '20 at 05:02

score 25 · Answer 2 · answered Oct 16 '17 at 17:31

First, inject router & ActivatedRoute on constructor

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

then use to Click Event:

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

You navigate to the expected page.In my scenario, I wanted to go recipe /1 to edit the recipe. http://localhost:4200/recipes/1/edit

score 5 · Answer 3 · answered Nov 06 '19 at 14:10

Note: the routes are case sensitive so make sure you match the casing across

This worked for me for Angular 8:
From the parent component / page, to navigate to the sub page using typescript:

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

My router in the parent's module looks like this:

const routes: Routes = [
  {
    path: '',
    component: MyPage,
    children: [
      { path: 'subPage', component: subPageComponent}
    ]
  }
];

And on the parent's html page use the following to navigate using a link:

<a [routerLink]="'subPage'">Sub Page Link</a>
<router-outlet></router-outlet>

score 1 · Answer 4 · answered Aug 24 '16 at 14:46

1

You may use below,

Assumption is questions is loaded into your primary router-outlet

  this.router.navigate([
      '/',
      { 
        outlets: {
          primary: [
              // below may be replaced with different variables
              'questions',
              '123',  
              'step2'
          ]
        }
      }
  ])

Hope this helps!!

answered Aug 24 '16 at 14:46

Madhu Ranjan

17,334
7
60
69

Thanks. But I would like to avoid to write the complete route path. – Thomas Aug 26 '16 at 07:39

Navigate relative with Angular 2 Router (Version 3)

4 Answers4

Linked