CODEWITHSUNDEEP
angularroutes
Vok
Vok

Reputation: 467

How can I set up nested routes in Angular 2?

I have some routes in Angular2

{ path: 'items', component: ItemComponent }

ItemComponent has it's own submenu.

<a routerLink='/items/sales'>Sales</a>
<a routerLink='/items/suppliers'>Suppliers</a>
<a routerLink='/items/stock'>Stock</a>

I want the submenu to be visible in all of those components (sales, suppliers, stock)

I'm trying to put a second router-outlet in the ItemComponent, which should then show sales / suppliers / stock. The reason is I want the submenu to be visible on all of these.

How can I set up nested routes like this?

Or should I instead just create an ItemMenuComponent and put an element for that at the top of sales, suppliers and stock components?

Upvotes: 1

Views: 1139

Answers (1)

narainsagar
narainsagar

Reputation: 1129

You may define children routes like this.

[    
    {
        path: 'items',
        component: ItemsComponent,
        children: [
            {
                path: '', // default
                component: SubItemComponent1
            },
            {
                path: 'item1',
                component: SubItemComponent1
            },
            {
                path: 'item2',
                component: SubItemComponent1
            }
        ]
    },
    ....
    ....
]

For more: https://github.com/narainsagar/angular2-demos/blob/master/src/app/app.routes.ts#L17

Cheers,

Upvotes: 4

Related Questions