Could someone pls create stackblitz to understand how to use breadcrumb service?

Hi,

I’m trying to show bread crumb like below

Users > View User > John
Users > Edit User > John
Users > View User > John > View Family > Allan 

I’m trying to bind the bread crumb value from api call via activated.snapshot

Bit struggling to understand xng-breadcrumb service. So need help

Update

finally understood how to use breadcrumb service, but still not able to achieve what im looking for I’ve done like below

this.breadcrumbService.set(this.actRoute.snapshot.data.breadcrumb, resp.firstName);

I’m able to get expected string in this.actRoute.snapshot.data.breadcrumb and as well as resp.firstName as per the attachment .

But still not able to show like Users > View User > John

PFA,

Thanks

[github-actions[bot]]

👋 @suriyaJaay Thank you for raising an issue. We will will investigate into the matter and get back to you as soon as possible. Please make sure you have given us as much context as possible.

[suriyaJaay]

Hi @udayvunnam i just resuming xng-breadcrump integration once again. Here am stuck at one point. so need your help

I’ll try to explain as much as possible. to make it clear pls refer below screenshot my navigation flow will be like

problem

i cant show Order Dashboard breadcrumb when navigating to order dashboard to online or offline orders

Current behavior

Order List > Online Orders

Expected behavior

Order List > Order Dashboard > Online orders

Because of current behavior im not able to go back to order dashboard.

Could you pls help me to understand what i am exactly missing ?

apologize for not adding stackblitz, for some reason I can’t access the stackblitz or sandbox.

// lazy module

{
    path: 'orders',
        loadChildren: () => import('./feature/orders/orders.module').then(m => m.OrdersModule),
            data: { breadcrumb: 'List of orders' }
},

// children

const routes: Routes = [

    { path: '', component: OrdersList },
    { path: 'add-new-order', component: AddNewOrder, data: { breadcrumb: 'Add New Customer' } },
    {
        path: 'view-order/:id', component: ViewOrderDetailsComponent, data: {
            breadcrumb: {
                alias: 'orderName'
            }
        }
    },
    {
        path: 'view-order-dashboard/:id', 
        component: ViewOrderDashboardComponent, // this page will have two tabs like 
         Online order and Offline
        data: {
            breadcrumb: 'Dashboard'
        }
    },
    {
        path: ':id/offline-orders/:type', component: OfflineOrderComponent, data: { // offline order
            breadcrumb: 'Offline order'
        }
    },
    {
        path: 'online-orders/:id', component: OnlineOrdersComponent, data: { // online order
            breadcrumb: 'Online order'
        }
    },
];

Thanks for your time