NOTE: This article has been archived since it was written in 2018. Now this solution may not work with the latest Angular version. You may continue...
For further actions, you may consider blocking this person and/or reporting abuse
thank you for this tuto .
but I getting thir error and I don't know how resolve it:
Types of parameters 'source' and 'source' are incompatible.
Type 'import("C:/Users/asus/breadcrumb/node_modules/rxjs/internal/Observable").Observable' is not assignable to
type 'import("C:/Users/asus/breadcrumb/node_modules/rxjs/internal/Observable").Observable'.
Type 'import("C:/Users/asus/breadcrumb/node_modules/@angular/router/router").Event' is not assignable to type 'Event'.
Type 'ActivationEnd' is missing the following properties from type 'Event': bubbles, cancelBubble, cancelable, composed, and 18 more.
Either import the generic event from @angular/router:
or change the filter to infer the type automatically:
Using RxJS (6.6.3) and ESLint (7.10.0 with default rules) the code above fails:
It could be different rxjs version. When I wrote this article, I used rxjs 5.5.6 version.
Hi I have tried the above code in my application. Right now i have home component which having link change password which will redirect to change password page. So i have added bewlo route configuration like:
{
path:'home',component:HomeComponent,children: [{
path: 'changepassword',
component:ChangePasswordComponent,
data:{
breadcrumb: 'Change Password'
}
}
],
canActivate:[AuthGuard],
data: { breadcrumb: 'Home' },
},
So my purpose is when i click the change password link the breacrumb should be Home/Change Password. But currently is is not behaving as per my need. Can you help me how i can achieve? Or am i missing anything? Because if i redirects from home to change password the this.breadcrumbs array only holds single element.
It's easier for us to help you if you could provide a github repo so that we can replicate the issue. :)
Your breadcrumbs are not displayed correctly or the component is not drawn ?
see when I click on the change password link from my home component , only Change Password link is getting shown into the breadcrumb,not link like Home/Change Password.
I wanted the breadcrumb-like: Home/Change Password
Have you changed the breadcrumb component code ? You can show the html and the component code itself as a screenshot
No,i did not change any single line of code for the breadcrumb component. Even I did not change HTML code also. I have only copy-pasted the same things. I also created the interface. Whatever the route configuration I did for the children is it right? which i have added above.
I am following each and every step given here.
Why is the call to buildBreadCrumb called from the constructor and component lifecycle method? If you remove from the designer, then the breadcrumbs are not displayed? It’s not clear to everyone why this is happening.
The buildBreadCrumb in the constructor is the initial build for breadcrumb when the application is loaded.
The buildBreadCrumb in onInit is actually in a subscription to a router change. It means that the breadcrumb is always re-built when there is a router change. Because if some modules are lazy loaded, you wouldn't have their routes in the beginning.
Hope that clarifies :)
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',
},
}
]
}
]
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 :)
I tried your breacrumbs and works fine, but I am trying to get the param id from the route (this.activatedRoute.snapshot.params.id;) in other component, but it's always undefined. In your example, it will be in the issue-log-detail.component.ts.
Its not working correctly in lazy loaded components or child components.
Great post! very usefull. How complicated would be include icons like "home" and so..?
thanks for the info.
I have this issue in my .subscribe in ngOnInit
solve already
it works fine but not working when I reload/refresh the page. The breadcrumb title becomes invisible
Thank you very much, it works perfectly. The only thing you have to import the event to not get failure.