When click the Home link of breadcrumb routing is not working

[roshanjayawardena]

This is my code app-routing.module.ts

path: '',
component: LayoutComponent,
canActivate: [AuthGuardService],
data: { breadcrumb: 'Home' },
children: [
// dashboard routes
{
path: 'designer',
loadChildren: () =>
import('./Modules/features/designer/designer.module').then(
(m) => m.DesignerModule
),
data: { breadcrumb: { skip: true } }
},

This is the code of child routing

const routes: Routes = [
{
path: 'dashboard',
component: DesignerDashboardComponent,
data: { breadcrumb: { skip: true } }
},
{
path: 'marketPlace',
component: MarketPlaceComponent,
},

when I click breadcrumb home link, routing is not working

[roshanjayawardena]

can't we retrieve the routing values of breadcrumb object?
Can't we update the breadcrumb route?

[ShamalFdo129]

I also want to change breadcrumb routing dynamically, in my situation, I route back to different component based on user's role.
that logic is in home component. (not in app-routing.module.ts) @udayvunnam could you please let me know is there any workaround for modifying/assigning routes in runtime.
Thank you
/Shamal.

[udayvunnam]

@roshanjayawardena @ShamalFdo129 Can you be able to provide a http://stackblitz.com/ minimal example with your use case for updating the breadcrumb route dynamically.

[roshanjayawardena]

Hi Uday, @udayvunnam ,

Please refer the below link
https://stackblitz.com/github/roshanjayawardena/mybreadcrumb

Please refer above screenshot. Basically, we navigate a router link based on the user's role. So we want to change home breadcrumb routing dynamically. Please have a look and appreciate if you could suggest a workaround.

Thank you
@roshanjayawardena

[roshanjayawardena]

Hi Uday,
@udayvunnam

Please could you please give us a update

Thank you.

[udayvunnam]

@roshanjayawardena thanks for the reproducible example. I will rollout a fix likely this week

[ShamalFdo129]

@udayvunnam
Hi Uday,
Thank you for spending time on our request. Appreciate if you could suggest a workaround for us if a fix takes some time to rollout.

Thanks and Regards,
/Shamal

[udayvunnam]

@roshanjayawardena @ShamalFdo129 I am coming up with a solution like below.

1. Provide routeInterceptor callback either in RouteConfig if you know the redirection logic upfront

  {
    path: '',
    pathMatch: 'full',
    component: HomeComponent,
    data: {
      breadcrumb: {
        label: 'my home',
        info: 'home',
        routeInterceptor: (routeLink, breadcrumb)=> {
          console.log(routeLink);
          return routeLink;
        }
      },
    },
  }

2. If you want to access Application context, set this interceptor from within the component

const isDesigner = true;
breadcrumbService.set('home', {routeInterceptor: (routeLink, breadcrumb)=>  isDesigner ? '/designer' : routeLink});

[udayvunnam]

Let me know if you need any other context as part of this.

[udayvunnam]

@roshanjayawardena @ShamalFdo129 upgrade to the latest version i.e 6.3.0 to get this functionality - https://github.com/udayvunnam/xng-breadcrumb/releases/tag/v6.3.0

Usage: https://github.com/udayvunnam/xng-breadcrumb#intercept-the-routing-via-breadcrumb-navigation---routeinterceptor

[roshanjayawardena]

Hi uday,
@udayvunnam

Thanks for your time. I updated the latest package and applied the above solution.
But it didn't work as I expected.
I have updated the stackblitz example of how I applied the solution. Please can you guide us?
Further, can you explain the following method?

this.breadcrumbService.set('Home', {
routeInterceptor: (routeLink, breadcrumb) =>
isDesigner ? 'designer' : routeLink,
});

what is the actual parameter we want to pass instead of 'Home'
Should it be actual router value or breadcrumb label value?

Thank you

[udayvunnam]

@roshanjayawardena Thanks for raising this bug. There was a difference in how the breadcrumb is handled for root and is fixed now.

One fix you have to do from the application code is to pass the correct path or Alias to BreadcrumbService.set(). For home, you can consider path as '' OR '/'. both works.

The below code should work for you with [email protected]

this.breadcrumbService.set('', {routeInterceptor: (routeLink) => isDesigner ? 'designer' : routeLink})
```;

[ShamalFdo129]

@udayvunnam
Hi Uday,
Thank you very much for your help and this perfectly matched with our requirement. I believe this feature helps whole community when changing breadcrumb route dynamically.

Thanks and Regards,
/Shamal

[roshanjayawardena]

@udayvunnam
Hi Uday,

Thank you very much for your support and for spending your time on this. This feature helped me to achieve my task.I also believe this feature helps the whole community.

Thanks
Roshan