Better way to create "child/nested" routes in Angular?

Question

My issue seems trivial, but I don't really know where to find an answer online..

Let's take a component which displays a list of 3 fruits. Each fruit has a dedicated component. The list URL is localhost:4200/fruit-list. I want to be able to navigate to localhost:4200/fruit-list/banana and have banana component displayed, but only this component, not in place of the "router-outlet" in the list component like a child route would.

A simple solution would be to individually declare 'fruit-list', 'fruit-list/banana', 'fruit-list/apple'... routes, but I don't find that really elegant. Isn't there a way to simply make the fruit routes be children of the list route, but simply display the fruit component when trying to go to the child route, but not display it INSIDE of the list component.

Poul Kruijt Poul Kruijt · Accepted Answer · 2020-02-26T13:21:59

That is possible with a componentless route. Like this:

export const routes = [
  { path: 'fruit-list', children: [
    { path: '', component: ListComponent },
    { path: 'banana', component: BananaComponent },
    { path: 'apple', component: AppleComponent }
  ]}
];

stack

Better way to create "child/nested" routes in Angular?

1 Answers