Calling the Angular router in TypeScript

Question

I have a button in a page like this:

<button [routerLink]="['../edit', 14]">Test</button>

So, if I'm at http://localhost/dashboard and click the button, I'm redirected to http://localhost/dashboard/edit/14, which is exactly what I expected.

Now I need to do the same in Typescript. I injected the Router service in my class and tried the following:

this.router.navigate([`../edit/${item.id}`]);

this.router.navigate([`/edit/${item.id}`]);

this.router.navigate([`edit/${item.id}`]);

But none is working, all of them redirect me to my starting page with no errors.

Does the Router need some extra setup?

score 23 · Accepted Answer · answered Feb 01 '17 at 18:48

23

You need to specify that you are routing relative to the current route. Here is how this can be done:

@Component({...})
class ChildComponent {
  constructor(private router: Router, private route: ActivatedRoute) {}

  go() {
    this.router.navigate([`../edit/${item.id}`], { relativeTo: this.route });
  }
}

Here are Docs describing the relativeTo property of the NavigationExtras class

answered Feb 01 '17 at 18:48

Teddy Sterne

13,774
2
46
51

2

import { ActivatedRoute, Router } from '@angular/router'; // This is how you import Route and ActivatedRoute – Saad Zahoor Nov 03 '22 at 11:33

score 1 · Answer 2 · answered Feb 01 '17 at 18:46

1

Remember to add the children routes on your app.module.ts:

RouterModule.forRoot(
    [{
        path: 'dashboard',
        component: Dashboard,
        children: [
            {
                path: 'edit/:id',
                component: EditComponent,
            }]
    }])

answered Feb 01 '17 at 18:46

dlcardozo

3,953
1
18
22

Yes, it's done. I didn't include in the answer because I don't think it's a problem with the routes setup, because I can navigate to it using the `routerLink` in HTML – rbasniak Feb 01 '17 at 18:48

Calling the Angular router in TypeScript

2 Answers2