angulartypescriptangular-routerangular-activatedroute

Angular 2 get parent activated route


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.


Solution

  • 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