Getting a Route parameter in an Angular child component

Question

I'm unable to get a routing parameter from a child component in my Angular 6 application

I have the following routes set up in app-routing.module:

{
    path: 'item/:id',
    component: ItemLayoutComponent,
    children: [
        { path: '', redirectTo: 'inbox',  pathMatch: 'full' },
        { path: 'inbox', loadChildren: './feature/inbox/inbox.module#InboxModule' }
    ]
},

And then this in my inbox-routing-module.ts:

{
    path: '',
    component: InboxComponent,
    children: [
        { path: '', redirectTo: 'messages',  pathMatch: 'full' },
        {
            path: 'messages', component: MessagesComponent
        },
    ]
}

This allows me to have a url that looks like this to get to my messages component:

item/5200/inbox/messages

My problem is that in my ItemLayoutComponent I can get the value of the id field (in this case 5200) with the following code:

this.route.snapshot.paramMap.get('id')

However I need the value of this ID in my MessagesComponent. Currently the same code gives me null.

That's a child route, so did you check if it's available via the parent? — jonrsharpe
– jonrsharpe, Commented Jul 21, 2018 at 7:12
Good point - this.route.snapshot.parent.paramMap.get('id') is null unfortunately — Robbie Mills
– Robbie Mills, Commented Jul 21, 2018 at 7:14
Possible duplicate of Pass route param from parent to child routes — jonrsharpe
– jonrsharpe, Commented Jul 21, 2018 at 7:18

Robbie Mills · Accepted Answer · 2018-07-21 07:44:50Z

22

Turns out I needed the following:

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

Thanks to @jonrsharpe for pointing me in the right direction

answered Jul 21, 2018 at 7:44

Robbie Mills

2,9559 gold badges60 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Akj · Accepted Answer · 2018-07-21 07:24:22Z

2

Try like this:

HTML :

{
    path: 'item/:id',
    component: ItemLayoutComponent,
    children: [
        { path: '', redirectTo: 'inbox',  pathMatch: 'full' },
        { path: 'inbox', loadChildren: './feature/inbox/inbox.module#InboxModule' }
    ]
},

TS:

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

id: any;

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

this.route.paramMap.subscribe(param => {
            this.id = param.get('id');
        });

answered Jul 21, 2018 at 7:24

Akj

7,2513 gold badges31 silver badges41 bronze badges

5 Comments

Robbie Mills Over a year ago

Which TS file is this?

Akj Over a year ago

item component file lets say 'ItemLayoutComponent'

Robbie Mills Over a year ago

So in the ItemLayoutComponent I can use the code to get the id ok as per my question - problem is that I need it in the MessagesComponent

Akj Over a year ago

than try { path: 'messages/:id', component: MessagesComponent },

Robbie Mills Over a year ago

That's not how I'd like my URL's though (for integration with a legacy app). I'm trying to get them in the format item/5200/inbox/messages

Gopinath · Accepted Answer · 2019-09-14 07:41:04Z

Problem I faced was, route param in root module path is not exist in feature module's activate snapshot.

From @jonrsharpe, I used to run while loop in bottom-up approach until route param found in parents.

var cgName: string = "";
cgName = next.paramMap.get('cgname');
var snap = next;

while (cgName === null && snap.parent !== null) {
     cgName = snap.parent.paramMap.get('cgname');
     snap = snap.parent;
}

My route definition was like,

Root Module

const appRoutes: Routes = [
  { path: 'default', component: DefaultComponent },
  {
    path: ':cgname',
    canActivate: [PathGuard],
    component: LoggedUserLayoutComponent,
    children: [
      { path: 'shop', loadChildren: () => import('./../ShoppingModule/shopping.module').then(mod => mod.ShoppingModule) },
      { path: 'welcome', component: WelcomeComponent, canActivate: [AuthGuard] },
      { path: '', component: LoginRedirectProxyComponent, pathMatch: 'prefix' }
    ]
  },
  { path: '', redirectTo: '/default', pathMatch: 'full' },
  { path: '**', component: PageNotFoundComponent }
];

Feature Module

const routes: Routes = [
  { path: 'product', component: ProductDetailComponent, canActivate: [PathGuard] },
  { path: '', component: ShopPageComponent, canActivate: [PathGuard] },
];

Collectives™ on Stack Overflow

Getting a Route parameter in an Angular child component

3 Answers 3

Comments

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related