Getting route params in modal components in angular

Question

I can't get route params data in modal components.

Url: http://localhost:4200/portal/profiles/edit/5303

routing:

{ 
  path: ':accountId', 
  component: ProfileOverviewComponent, 
  data: { 
    title: 'Profile Overview', 
    icon: 'fa fa-id-card-o' 
  }
},

This command returns false:

if (this.route.snapshot.paramMap.get('accountId'))

Have you tried to give the full path for your component like this: { path: 'profiles/edit/:accountId', component: ProfileOverviewComponent, — Akif, Dec 22 '20 at 20:40
And, does it help you to get a clue? https://stackoverflow.com/a/56271616/10659482 — Akif, Dec 22 '20 at 20:42
Yeah, I tried many times. This code works in ProfileOverviewComponent but it doesn't work in modal component. — Bora Açıcı, Dec 22 '20 at 21:11
RouterParams are only available in routed components. You could pass it from profile overview to the modal? — MikeOne, Dec 22 '20 at 23:15

Wilt · Answer 1 · 2022-03-03T18:44:28.380

Modal components created with a named outlet are independent of the (unnamed) primary route but simply stacked on top. Would you need to get the route params (or any other data) from the primary route you can access it through the "root" property of the activated route.

You can do that like this:

const getLastChild = (route) => {
  let child = route;
  while (child.firstChild) {
    child = child.firstChild
  }
  return child;
}

const primary = this.route.snapshot.root; // Get the primary route
const lastChild = getLastChild(primary); // Get the last child (from which you want the params).
const params = lastChild.params;

This should resolve your problem, otherwise leave a comment.

Getting route params in modal components in angular

1 Answers1