I'm currently working on an angular 8 breadcrumb component for my application. The requirement is to display it in the content of the page, not just in the header, and it should never be located outside the router-outlet. This has posed a challenge for me as I am using lazy loaded modules and placing the component inside lazy loaded component templates.
My approach was to create an observable that maps to the firstChild of the router root by applying a filter. However, I have been struggling to pass the condition successfully so far.
breadcrumbs$: Observable<Breadcrumb[]>;
constructor(router: Router, activatedRoute: ActivatedRoute) {
this.breadcrumbs$ = router.events.pipe(
filter(event => event instanceof NavigationEnd),
map(() => {
return this.buildBreadcrumbs(activatedRoute.root.firstChild);
})
);
}
buildBreadcrumbs(route: ActivatedRoute) {
// logic
}
The issue arises when the breadcrumb component is rendered inside the router-outlet. If I place it at the same level in the template, everything works perfectly fine. Normally, checking for NavigationEnd event with subscription to router.events would work. Is there any alternative solution?
Thank you for your suggestions!
Edit: I have provided a real-life example to demonstrate the issue here https://stackblitz.com/edit/breadcrumbs-mwsp