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?

Teddy Sterne · Accepted Answer · 2017-02-01 18:48:14Z

27

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 1, 2017 at 18:48

Teddy Sterne

14.3k2 gold badges49 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Saad Zahoor Over a year ago

import { ActivatedRoute, Router } from '@angular/router'; // This is how you import Route and ActivatedRoute

dlcardozo · Accepted Answer · 2017-02-01 18:46:05Z

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 1, 2017 at 18:46

dlcardozo

4,0231 gold badge21 silver badges22 bronze badges

1 Comment

rbasniak Over a year ago

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

Collectives™ on Stack Overflow

Calling the Angular router in TypeScript

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related