DEV Community

Create a Simple Breadcrumb in Angular

Zhiyue Yi on December 30, 2019

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...
Collapse
 
hachirsara2020 profile image
hachirsara2020

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.

24         filter((event: Event) => event instanceof NavigationEnd),
Enter fullscreen mode Exit fullscreen mode
Collapse
 
larsvonqualen profile image
Lars von Qualen

Either import the generic event from @angular/router:

import { Router, ActivatedRoute, NavigationEnd, Event } from '@angular/router';
Enter fullscreen mode Exit fullscreen mode

or change the filter to infer the type automatically:

filter(event => event instanceof NavigationEnd),
Enter fullscreen mode Exit fullscreen mode
Collapse
 
paco_ita profile image
Francesco Leardini • Edited

Using RxJS (6.6.3) and ESLint (7.10.0 with default rules) the code above fails:

Collapse
 
zhiyueyi profile image
Zhiyue Yi

It could be different rxjs version. When I wrote this article, I used rxjs 5.5.6 version.

Collapse
 
gtbhopale2412 profile image
gtbhopale2412

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.

Collapse
 
zhiyueyi profile image
Zhiyue Yi

It's easier for us to help you if you could provide a github repo so that we can replicate the issue. :)

Collapse
 
lionchi profile image
lionchi

Your breadcrumbs are not displayed correctly or the component is not drawn ?

Collapse
 
gtbhopale2412 profile image
gtbhopale2412

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

Thread Thread
 
lionchi profile image
lionchi

Have you changed the breadcrumb component code ? You can show the html and the component code itself as a screenshot

Thread Thread
 
gtbhopale2412 profile image
gtbhopale2412 • Edited

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.

Collapse
 
lionchi profile image
lionchi

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.

Collapse
 
zhiyueyi profile image
Zhiyue Yi

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 :)

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 :)

Collapse
 
jennycoca profile image
jennycoca

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.

Collapse
 
gauravdarkslayer profile image
Gaurav bhojwani

Its not working correctly in lazy loaded components or child components.

Collapse
 
jcmelchorp profile image
Ju1i0 M31ch0r

Great post! very usefull. How complicated would be include icons like "home" and so..?

Collapse
 
jeromeburce11 profile image
JeromeBurce • Edited

thanks for the info.
I have this issue in my .subscribe in ngOnInit

Collapse
 
jeromeburce11 profile image
JeromeBurce

solve already

Collapse
 
parashar123 profile image
suraj kumar

it works fine but not working when I reload/refresh the page. The breadcrumb title becomes invisible

Collapse
 
javims95 profile image
javims95

Thank you very much, it works perfectly. The only thing you have to import the event to not get failure.