How to properly setup nested routing in angular

Question

I'm trying to setup angular route with nested path. parent page is /list child page is /list/:id

for some reason, the following route doesnt work. if I navigate to /list/:id, the route is found, but it loads ListComponent instead of ViewComponent

{
  path: 'list',
  component: ListComponent,
  children: [
    {
      path: ':id',
      component: ViewComponent
    }
  ]
}

I'm pretty sure this is the same setup as the example in angular doc. am I missing something?

the following works, but it has the wrong hierarchy, /list is siblings to /list/:id

{
  path: 'list',
  children: [
    {
      path: '',
      component: ListComponent
    },
    {
      path: ':id',
      component: ViewComponent
    }
  ]
}

see stackblitz example

ViewComponent is child of List component so shouldn't it render inside List component. I cannot see it inside List Component template? — ammadkh
– ammadkh, Commented Jul 30, 2021 at 7:57

Engam · Accepted Answer · 2021-07-30 08:10:47Z

1

In the first example, since ViewComponent is a child of ListComponent, you have to add <router-outlet></router-outlet> in list.component.html, based on your stackblitz example:

<p>
list works!
</p>

<a [routerLink]="['./view']">view</a>
or 
<button (click)="buttonClick()">view</button>

<!-- add the line below here-->
<router-outlet></router-outlet>

ViewComponent is here loaded where you place the router outlet.

This will make angular to load both ListComponent and ViewComponent when you go to the route /list/:id, since ViewComponent is a child of ListComponent.

Every route with children, needs to have the <router-outlet></router-outlet> tag.

This architecture is useful for example (and many other types of situations) if ListComponent is a navigation sidebar, and ViewComponent contains data from backend.

Edit

If you don't want to load both ListComponent and ViewComponent when you visit the /list/:id route, you could change your routes to look like this:

const mainRoutes: Routes = [
  {
    path: 'list',
    component: ListComponent,
  },
  {
    path: 'list/:id',
    component: ViewComponent
  }
];

When you are going with this architecture only ViewComponent is loaded when you visit 'list/:id', since ViewComponent is not a child of ListComponent.

In this example you shouldn't use the router-outlet in list.component.html

edited Jul 30, 2021 at 8:10

answered Jul 30, 2021 at 8:04

Engam

1,0518 silver badges17 bronze badges

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

2 Comments

dna01 Over a year ago

So does it mean route hierarchy can only be used with matching the component layout hierarchy? I was thinking of using route hierarchy only to control url so that I can navigate with navigateTo(['..'], relative to current route). not to display both list and view on same page

Engam Over a year ago

I'm not entirely certain what your question is, but the routing modules are pretty flexible. You can in theory declare some pretty long routes, where the parent path's don't need to have a component connected to it, for example you could declare a route like this: { path: 'only/last/path/needs/to/have/a/component', component: LastPathComponent }. Also, routes doesn't need to be connected to a component if you set up a redirectTo rule on it, or add children :)

ammadkh · Accepted Answer · 2021-07-30 08:11:11Z

1

Since ViewComponent is a child component, you've to render it inside parent component. You can do it by adding <router-outlet></router-outlet> in the ListComponent. It will solve your problem.

answered Jul 30, 2021 at 8:11

ammadkh

6064 silver badges9 bronze badges

Comments

Joaquim · Accepted Answer · 2021-07-30 08:20:28Z

-1

Previously, in a project, I have done it the following way (I changed the names of the components to match your components):

const routes: Routes = [
{
  path     : 'list',
  component: ListComponent      
},
{
  path     : 'list/:id',
  component: ViewComponent      
},
  {
    path     : '**',
    component: ListComponent        
  }  
];

And then in the imports:

@ngModule({
    imports: [RouterModule.forChild(routes)]
})

Hope that helps.

edited Jul 30, 2021 at 8:20

answered Jul 30, 2021 at 8:06

Joaquim

821 gold badge3 silver badges8 bronze badges

6 Comments

ammadkh Over a year ago

I guess your answer is downvoted because the person is seeking the correct configuration of child component whereas your answer does not mention child component. It simply configuring the sibling components.

Engam Over a year ago

It might be because your solution is more complex than what is asked for in the question, with the resolvers and auth guards (but I didn't downvote, so not sure), so it makes it more difficult to understand what you actually was trying to explain :)

Joaquim Over a year ago

Thanks ammadkh, but I do mention the child component, ViewComponent, about half way down my answer. If you could explain how I did not mention it, i would be very grateful

Joaquim Over a year ago

Thanks Engam, sure that is a fair enough comment. I have edited accordingly by taking out the data and canActivate.

ammadkh Over a year ago

yes you mentioned the viewComponent but its relation with your list component is of SIBLING. whereas the person is asking for parent and child configuration in routing. He is using 'children' array inside ListComponent route configuration and he is seeking help related to this but you're not using children property in your list component configuration.

|

Collectives™ on Stack Overflow

How to properly setup nested routing in angular

3 Answers 3

2 Comments

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related