How do I navigate to a parent route from a child route?

by

Do you want a link/HTML or do you want to route imperatively/in code?

Link: The RouterLink directive always treats the provided link as a delta to the current URL:

[routerLink]="['/absolute']"
[routerLink]="['../../parent']"
[routerLink]="['../sibling']"
[routerLink]="['./child']"     // or
[routerLink]="['child']" 

// with route param     ../../parent;abc=xyz
[routerLink]="['../../parent', {abc: 'xyz'}]"
// with query param and fragment   ../../parent?p1=value1&p2=v2#frag
[routerLink]="['../../parent']" [queryParams]="{p1: 'value', p2: 'v2'}" fragment="frag"

With RouterLink, remember to import and use the directives array:

import { ROUTER_DIRECTIVES } from '@angular/router';
@Component({
    directives: [ROUTER_DIRECTIVES],

Imperative: The navigate() method requires a starting point (i.e., the relativeTo parameter). If none is provided, the navigation is absolute:

import { Router, ActivatedRoute } from '@angular/router';
...
constructor(private router: Router, private route: ActivatedRoute) {}
...
this.router.navigate(["/absolute/path"]);
this.router.navigate(["../../parent"], {relativeTo: this.route});
this.router.navigate(["../sibling"],   {relativeTo: this.route});
this.router.navigate(["./child"],      {relativeTo: this.route}); // or
this.router.navigate(["child"],        {relativeTo: this.route});

// with route param     ../../parent;abc=xyz
this.router.navigate(["../../parent", {abc: 'xyz'}], {relativeTo: this.route});
// with query param and fragment   ../../parent?p1=value1&p2=v2#frag
this.router.navigate(["../../parent"], {relativeTo: this.route, 
    queryParams: {p1: 'value', p2: 'v2'}, fragment: 'frag'});

// navigate without updating the URL 
this.router.navigate(["../../parent"], {relativeTo: this.route, skipLocationChange: true});

More Related Contents:

  1. Best method to set different layout for different pages in angular 4
  2. Send data through routing paths in Angular
  3. How to get query parameters from URL in Angular 5?
  4. In Angular, What is ‘pathmatch: full’ and what effect does it have?
  5. How to trace routing in Angular 2?
  6. Multiple named router-outlet angular 2
  7. What is the difference between ActivatedRoute and ActivatedRouteSnapshot in Angular4
  8. Angular 2 – how round calculated number?
  9. Angular/RxJS When should I unsubscribe from `Subscription`
  10. Dynamically add event listener
  11. What is the equivalent of ngShow and ngHide in Angular 2+?
  12. I get “Http failure response for (unknown url): 0 Unknown Error” instead of actual error message in Angular
  13. Can’t bind to ‘ng-forOf’ since it isn’t a known native property [duplicate]
  14. How to use `trackBy` with `ngFor`
  15. Angular and Typescript: Can’t find names – Error: cannot find name
  16. How to make an angular module to ignore http interceptor added in a core module
  17. How to share data between components using a service properly?
  18. Typescript/Angular/ES6: can I finally let `hasOwnProperty()` die in for loops?
  19. Emit event from parent to child
  20. Multiple conditions in ngClass – Angular 4
  21. angular4 httpclient csrf does not send x-xsrf-token
  22. How do I get the absolute path of the current page in Angular 2?
  23. How to use variable to define templateUrl in Angular2
  24. Behaviour subject initial value null?
  25. Change Detection issue — Why is this changing when it’s the same object reference with On Push
  26. How to reset form validation on submission of the form in ANGULAR 2
  27. Angular 4 Lazy loading with named router-outlet not working
  28. How to execute only one test spec with angular-cli
  29. How to change angular material datepicker format
  30. How to make a post request with angular 5

Leave a Comment