DEV Community

Discussion on: Create a Simple Breadcrumb in Angular

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.