How to retrieve the parent activated route in Angular 2

Question

How to retrieve the parent activated route in Angular 2

My route structure includes parent and child routes as shown below:

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

When navigating in the browser to host.com/dashboard/wage-types, I want to retrieve the activated parent route, specifically /dashboard. I am looking for a solution within Angular 2 framework, but I could also consider JavaScript code if necessary.

angular typescript angular-router angular-activatedroute

Answer 1

Answer №1

To achieve this, utilize the parent property on the ActivatedRoute - an example implementation is shown below.

export class MyComponent implement OnInit {

    constructor(private activatedRoute: ActivatedRoute) {}

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

}

For more in-depth information about the ActivatedRoute, visit: https://angular.io/api/router/ActivatedRoute

Answer 2

To achieve this, utilize the parent property on the ActivatedRoute - an example implementation is shown below.

export class MyComponent implement OnInit {

    constructor(private activatedRoute: ActivatedRoute) {}

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

}

For more in-depth information about the ActivatedRoute, visit: https://angular.io/api/router/ActivatedRoute

Answer 3

Answer №2

To determine if a route is a parent route, you can check if there is only one slash 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 for parent/main route
          }
        });
 }

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

Answer 4

To determine if a route is a parent route, you can check if there is only one slash 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 for parent/main route
          }
        });
 }

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

Answer 5

Answer №3

If you're looking for a stable, Angular-like approach to achieve this, here's one way you can do it:

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

 //...

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

 doSomethingWithParentRoute() {
     
     // You can generate a UrlTree for the parent path like so:
     const parentUrlTree: UrlTree = this.router.createUrlTree(['../'], { relativeTo: this._route });
     // If you need to go up multiple levels, use something like '../../../'

     // Now you can manipulate the urlTree as needed:
     let path: string = this.router.serializeUrl(parentUrlTree);
     // or
     path = this.parentUrlTree.toString();
     // and so on...

     // Additionally, you can access the parent route as an ActivatedRoute object by:
     const parentRoute: ActivatedRoute = this.route.parent;
 }

IMPORTANT: If you are using Angular version below 11, or have set relativeLinkResolution: 'legacy' in your router module, then the '../' refers to the same level in the path, so consider using '../../' instead. More information available at: https://angular.io/guide/deprecations#relativeLinkResolution

Answer 6

If you're looking for a stable, Angular-like approach to achieve this, here's one way you can do it:

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

 //...

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

 doSomethingWithParentRoute() {
     
     // You can generate a UrlTree for the parent path like so:
     const parentUrlTree: UrlTree = this.router.createUrlTree(['../'], { relativeTo: this._route });
     // If you need to go up multiple levels, use something like '../../../'

     // Now you can manipulate the urlTree as needed:
     let path: string = this.router.serializeUrl(parentUrlTree);
     // or
     path = this.parentUrlTree.toString();
     // and so on...

     // Additionally, you can access the parent route as an ActivatedRoute object by:
     const parentRoute: ActivatedRoute = this.route.parent;
 }

IMPORTANT: If you are using Angular version below 11, or have set relativeLinkResolution: 'legacy' in your router module, then the '../' refers to the same level in the path, so consider using '../../' instead. More information available at: https://angular.io/guide/deprecations#relativeLinkResolution

How to retrieve the parent activated route in Angular 2

Answer №1

Answer №2

Answer №3

Similar questions

Example of a Single-Page Application using Angular 2

Angular2 error: Unable to access property 'getKey' because it is undefined

NestJS does not recognize TypeORM .env configuration in production build

React - The `component` prop you have supplied to ButtonBase is not valid. Please ensure that the children prop is properly displayed within this customized component

Create dynamic modals in ReactJS that appear when a row is clicked

There was an error encountered trying to access the options (URL) with a 405 method not allowed status. Additionally, the request to load the (URL) failed with a response indicating an

Use Angular2 to showcase the selected image as the main one when the user clicks on the

Display changes in the Angular UI when the cache is refreshed following the API request

Experiencing difficulty retrieving individual :id information from a list in MEAN stack

Typescript - Error in Parsing: Expecting an expression

Encountering issues in Angular 2 when attempting to pass data into root component through ng-content and binding. Objective: Creating a reusable form component

Strange data being received by Angular from ASP.NET API

"Troubleshooting asynchronous requests in Angular and the issue with Http.get method

Having trouble changing the query string in the URL with Angular 4?

How to import a node module into an Angular app through Angular CLI and load children in

Angular Validation for Start and End Dates

Utilizing PrimeNG's p-dataView feature without repetitive FieldSets

The factory class is responsible for generating objects without specifying their type

Eliminate the Material Stepper heading

Utilizing a TypeScript function to trigger an action from within a Chart.js option callback