CODEWITHSUNDEEP
angularangular-router
Adrian Olosutean
Adrian Olosutean

Reputation: 179

Angular 4 Routing with nested components

I would like to have a routing like this: root root/childA root/childB root/childC

The root is a dashboard component that has links to the children but after clicking them, the dashboard does not remain, it only gets replaced by the children. It would be a mobile friendly UI that has back buttons and breadcrumbs. Which is the best way to achieve this?

Upvotes: 0

Views: 150

Answers (1)

Gary Holland
Gary Holland

Reputation: 2645

This is pretty straight forward. Define your path something like:

{ path: 'root', children: (<Routes> [
  { path: '', component: RootComponent, },
  { path: 'childA', component: ChildAComponent, },
  { path: 'childB', component: ChildBComponent, },
  { path: 'childC', component: ChildCComponent, },
])}

Check the angular tutorials for info on breadcrumb. For mobile friendly look at responsive development (i.e. through bootstrap or otherwise).

Good luck.

Upvotes: 1

Related Questions