Angular 2 get parent activated route

Question

I have a route with route children like this:

{
    path: 'dashboard',
    children: [{
        path: '',
        canActivate: [CanActivateAuthGuard],
        component: DashboardComponent
    }, {
        path: 'wage-types',
        component: WageTypesComponent
    }]
}

And in the browser I want to get the activated parent route like

host.com/dashboard/wage-types

How to get the /dashboard but possible with Angular 2 and not in JavaScript, but also I can accept JavaScript code too but primary Angular 2.

it's possible only if you use the parent component. – Roman C Feb 27 '17 at 10:43 — Roman C, Feb 27 '17 at 10:43

score 23 · Accepted Answer · edited Aug 29 '18 at 12:13

23

You can do this by using the parent property on the ActivatedRoute - something like this.

export class MyComponent implement OnInit {

    constructor(private activatedRoute: ActivatedRoute) {}

    ngOnInit() {
        this.activatedRoute.parent.url.subscribe((urlPath) => {
            const url = urlPath[urlPath.length - 1].path;
        })
    }

}

You can see everything from the ActivatedRoute in more detail here: https://angular.io/api/router/ActivatedRoute

edited Aug 29 '18 at 12:13

Francesco Borzi

56,083
47
179
252

answered Feb 27 '17 at 11:03

peppermcknight

1,545
16
30

2

yes, but this gives me an array, how can i filter to get only the /dashboard ? – Feb 27 '17 at 11:07
because you are using the parent of the current activated route, the last item in the array of UrlSegments will be the parent url - updated my answer to show this and to reflect my mistake the the url property is actually an observable – peppermcknight Feb 27 '17 at 11:22
ERROR TypeError: Cannot read properties of undefined (reading 'path') – Candelo Sep 06 '22 at 16:09

score 3 · Answer 2 · answered Feb 14 '19 at 14:59

You can check for parent route by determining if only one slash is present in it:

 constructor(private router: Router) {}

 ngOnInit() {
      this.router.events.pipe(filter(e => e instanceof NavigationEnd)).subscribe((x: any) => {
          if (this.isParentComponentRoute(x.url)) {
            // logic if parent main/parent route
          }
        });
  }

 isParentComponentRoute(url: string): boolean {
    return (
      url
        .split('')
        .reduce((acc: number, curr: string) => (curr.indexOf('/') > -1 ? acc + 1 : acc), 0) === 1
    );
  }

score 0 · Answer 3 · answered Nov 29 '22 at 21:00

There is a pretty stable, Angularish way to do so:

 import {ActivatedRoute, Router, UrlTree} from '@angular/router';

 //...

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

 doSomethingWithParentRoute() {
     
     // you can create a UrlTree for the parent path by:
     const prantUrlTree: UrlTree = this.router.createUrlTree(['../'], { relativeTo: this._route });
     // of course you can go higher if you want by using sg like '../../../'

     // Then you can use the urlTree as you wish:
     let path: string = this.router.serializeUrl(urlTree);
     // or
     path = this.urlTree.toString();
     // etc...

     // additionally you can also access your parent route as an ActivatedRoute object by:
     const parentRoute: ActivatedRoute = this.route.parent;
 }

NOTE: If you use < Angular 11, or you have relativeLinkResolution: 'legacy' set in your router module, then the '../' refers to the same level in the path, so you probably want to use '../../'. Read more: https://angular.io/guide/deprecations#relativeLinkResolution

Angular 2 get parent activated route

3 Answers3

Linked