DEV Community

Discussion on: Create a Simple Breadcrumb in Angular

Collapse
 
johanmatevosyan profile image
Hovhannes Matevosyan

Thanks for interesting post. Could you give any hint how to implement breadcrumbs within lazy loaded module?
For example if my module loads child components like below then the route gets nullified because of router-outlet directive which I have in UserComponent (root component of a lazy loaded module).
After that the first child points to the root of a entire project but not a module.
const routes: Routes = [
{
path: '', // route gets nullified here
component: UserComponent,
data: {
breadcrumb: 'User',
},
children: [
{
path: 'account',
component: AccountComponent,
data: {
breadcrumb: 'Account info',
},
}
]

}
]

Collapse
 
zhiyueyi profile image
Zhiyue Yi

It should be able to handle it, since the breadcrumb is always re-built when there is a router change.

So when you load the modules in, at the same time your router should have changed. Then the subscription is triggered, and lastly the breadcrumb is re-built.

Hope it helps :)