Angular : Get value of parameter in parent route

Question

I am having URLs like

www.yoursite.com/accounts/:accountid/info
www.yoursite.com/accounts/:accountid/users etc.

An integer value accountid is available in the URL

But can't access it using the ActivatedRoute parameters.

Now I am splitting the URL to get the accountid

Is there a better way to access the value other than splitting the URL ?

Update

I have a different module called account which includes all components and services for account related pages.

I am lazy loading this module. So in the root level routing , that is app-routing I specify

{ path:'account', loadChildren : './account/account.module#AccountModule' }

In the account module's account-routing, I specify the children by

path: 'account/:accountid', component: AccountComponent, canActivate: [AuthGuard],
    children: [
      { path: '', redirectTo: 'info', pathMatch: 'full' },
      { path: 'info', component: InfoComponent },
      { path: 'users, component: UsersComponent }
      {path: '**', redirectTo: 'info'}
    ]

Note :

We can access the params in children path if present. But not of parent part why?

I am getting undefined for params in parent path

instead of use `observable` approach you can use route `snapshot` method — Bhagwat Tupe, Mar 29 '19 at 07:19

jophab · Answer 1 · 2019-03-29T07:29:05.207

With the help of this article, the problem was solved.

For accessing the params in parent route, we need to use activeRoute.parent.params instead of activeRoute.params

this.activatedRoute.parent.params.subscribe(
    (params) => 
    { 
                 console.log(params.accountid); 
     });

Also from this stackoverflow question , a solution to make all params (including parent route params) available to child routes was found.

This is done by including a configuration object with the paramsInheritanceStrategy set to always where we import RouterModule

eg :

import {RouterModule, ExtraOptions} from "@angular/router";

export const routingConfiguration: ExtraOptions = {
  paramsInheritanceStrategy: 'always'
};

export const Routing = RouterModule.forRoot(routes, routingConfiguration);

Now we can access both parent and child route params using activeRoute.params

score 15 · Answer 2 · answered Jul 24 '21 at 21:22

15

All you need is to use paramsInheritanceStrategy. See https://angular.io/api/router/ExtraOptions

answered Jul 24 '21 at 21:22

Vugar Abdullayev

1,852
3
21
46

2

Work well for me on Angular 14. – Him Hah Sep 02 '22 at 08:56
This should be the right answer. Still working perfectly on Angular 15. – Gui Brunow Mar 22 '23 at 18:01

Seba Cherian · Answer 3 · 2019-03-29T07:37:46.003

8

Try this solution:

 this.activatedRoute.params.subscribe(params => {
        const accountid= params['accountid'];
    });

You can also try this if above didn't work. (Got this solution from here)

this.router.parent.params.switchMap(params => {
  // params = { id: 1234 }
});

edited Mar 29 '19 at 07:37

answered Mar 29 '19 at 06:09

Seba Cherian

1,755
6
18

Thanks for the answer. I have already tried this. Not working this case. I have updated the question to include more details. – jophab Mar 29 '19 at 06:32
@Seba Cherian here ,accountid is 'route param' not 'query param' so i think your solution won't work to get accountid value. – Nirali Mar 29 '19 at 07:12
If this answer solved your problem consider marking this answer/answer that worked as accepted(tick the answer) – Seba Cherian Mar 29 '19 at 08:27
Starting from Angular 5 you can use paramsInheritanceStrategy instead. No need to subscribe to parent route. – Vugar Abdullayev Aug 06 '21 at 08:33

score 4 · Answer 4 · answered May 01 '20 at 18:28

The parent property has been added to the route now:

 this.route.parent.paramMap
                .subscribe(params => {
                    if (params.has('accountid')) {
                        this.'accountid'= params.get('accountid');
                    }
                });

Sandy Sanap · Answer 5 · 2019-03-29T06:53:30.430

1

Try this

create the object of ActivatedRoute in constructor

constructor(private route: ActivatedRoute) {}

so once object get created you will get route parameters like

    let accountid = this.route.snapshot.params['accountid'];

    console.log(accountid);

OR

let accountid = this.activatedRoute.snapshot.paramMap.get('accountid');
console.log(accountid);

I hope this will be useful.

edited Mar 29 '19 at 06:53

answered Mar 29 '19 at 06:27

Sandy Sanap

755
1
5
17

2

This doesn't work if you're trying to get the param from a parent route as the OP is requesting – matt_lethargic May 01 '20 at 18:25

score 1 · Answer 6 · answered Apr 23 '23 at 16:14

1

private route: ActivatedRoute

this.route.snapshot.parent.params['accountid'])

answered Apr 23 '23 at 16:14

Oscar

31
3

score 0 · Answer 7 · answered Mar 05 '23 at 01:11

if you're doing a standalone main.ts without app.modules, you can use the withRouterConfig

bootstrapApplication(AppComponent, {
  providers: [
    // https://this-is-angular.github.io/angular-guides/docs/standalone-apis/configuring-the-router-using-standalone-features
    provideRouter(routes,
      withRouterConfig({paramsInheritanceStrategy: 'always'})
    ),
    ...

score 0 · Answer 8 · answered Mar 09 '23 at 10:09

0

I need to get params all the way from app-routing so this worked for me

this.route.firstChild?.params.subscribe((param) => {
      const accountId = param['account-id'];
});

Happy Coding!

answered Mar 09 '23 at 10:09

Bhavin

970
1
13
20

score 0 · Answer 9 · answered Aug 30 '23 at 13:23

0

for my case I had to go up several parents

this._activatedRoute.parent.parent.snapshot.paramMap.get('id')

answered Aug 30 '23 at 13:23

Johansrk

5,160
3
38
37

score -1 · Answer 10 · edited Mar 29 '19 at 06:30

-1

I think you need to access the current route params through following code in your constructor,

this.activeRoute.params.subscribe(params => {
     if(params['accountid']) {
         console.log(params['accountid'])  // use it where you need
     }
})

edited Mar 29 '19 at 06:30

Prashant Pimpale

10,349
9
44
84

answered Mar 29 '19 at 06:09

Nirali

454
1
6
16

Thanks for the answer. I have already tried this. Not working this case. I have updated the question to include more details. – jophab Mar 29 '19 at 06:32
@jophab show the actual code where you are using this! – Prashant Pimpale Mar 29 '19 at 06:41
@PrashantPimpale I tried this code in ngOnInit() of the InfoComponent. For the accountid, I am getting undefined. When I tried adding a param to child route and used the same code to log the param, it works. But it doesnot work with params of parent path – jophab Mar 29 '19 at 06:46
@jophab Can you provide Stackblitz? – Prashant Pimpale Mar 29 '19 at 06:53
This doesn't work if you're trying to get the param from the parent route. – matt_lethargic May 01 '20 at 18:24

Angular : Get value of parameter in parent route

10 Answers10

Linked