How do I navigate to a sibling route?

by

If you are using the new router (3.0.0-beta2), you can use the ActivatedRoute to navigate to relative path as follow:

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

///
// DOES NOT WORK SEE UPDATE
goToContact() {
  this.router.navigate(["../contacts"], { relativeTo: this.r });
}

Update 08/02/2019 Angular 7.1.0

current route: /department/7/employees/45/sales

the old version will do: /department/7/employees/45/sales/contacts

As per @KCarnaille’s comment the above does not work with the latest Router. The new way is to add .parent to this.r so

    // Working(08/02/2019) 
    // DOES NOT WORK SEE UPDATE
    goToContact() {
       this.router.navigate(["../contacts"], { relativeTo: this.r.parent });
    }

the update will do: /department/7/employees/45/contacts

Update 12/12/2021 Angular > 10

As @ziz194 mention it, this is how it now works.

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

goToContact() {
  this.router.navigate(["contacts"], { relativeTo: this.r });
}

More Related Contents:

  1. Angular2 router, get route data from url, to display breadcrumbs
  2. Angular 2.0 router not working on reloading the browser
  3. How to detect a route change in Angular?
  4. How to determine previous page URL in Angular?
  5. How do I create a singleton service in Angular 2?
  6. How to go back last page
  7. Angular: Cannot find a differ supporting object ‘[object Object]’
  8. Angular2 multiple router-outlet in the same template
  9. How to get current route
  10. Angular2: Make route paths case insensitive
  11. Angular 2 Scroll to top on Route Change
  12. Angular 2 – How do I navigate to another route using this.router.parent.navigate(‘/about’)?
  13. Angular2 – Redirect to calling url after successful login
  14. How can I conditionally disable the routerLink attribute?
  15. Angular 2: getting RouteParams from parent component
  16. Angular2 – Interaction between components using a service
  17. Angular2 router keep query string
  18. Angular 2 passing object via route params possible?
  19. Multiple canActivate guards all run when first fails
  20. Angular 2 router resolve with Observable
  21. Can’t reload/refresh active route
  22. Angular2 routing / deep linking not working with Apache 404
  23. Pass parameter into route guard
  24. Do I have to unsubscribe from ActivatedRoute (e.g. params) observables?
  25. Angular 2 – Routing – CanActivate work with Observable
  26. Angular routerLink does not navigate to the corresponding component
  27. How to get parameter on Angular2 route in Angular way?
  28. angular 2 azure deploy refresh error : The resource you are looking for has been removed, had its name changed, or is temporarily unavailable
  29. Angular2 Routing – keeping state of component when route changes [duplicate]
  30. Angular 2 different components with same route

Leave a Comment