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

[suriyaJaay]

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 asresp.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.

[udayvunnam]

@suriyaJaay can you refer to the documentation. You have multiple options to update id with actual name

https://github.com/udayvunnam/xng-breadcrumb#using-route-path-to-update-labels-dynamically https://github.com/udayvunnam/xng-breadcrumb#using-alias-to-update-labels-dynamically

In this repo you have multiple apps that showcase the usage under /apps

For your use case you can refer to https://github.com/udayvunnam/xng-breadcrumb/blob/8a57f89d3a134733ad04618e0390bf45e95b5e87/apps/breadcrumb-demo/src/app/mentor/mentor-details/mentor-details.component.ts#L30

[udayvunnam]

@suriyaJaay you can refer to the above docs also please check the multiple demo apps under libs for usage.

Let me know if you still see any issues.

[suriyaJaay]

@udayvunnam

I just again doing the same implementation long back. As i said before. i followed as per the document and even copy pasted the code. but i couldn't bind the name as per the screenshot buddy

you could see, i can able get firstname from response and the passing the same to breadCrumb service.

below is the template im using in appComponent.html

<xng-breadcrumb [separator]="separatorTemplate" class="myapp-breadcrumb" id="advancedTemplate1"
                [preserveQueryParams]="true">
                <ng-container *xngBreadcrumbItem="
                        let breadcrumb;
                        let info = info;
                        let first = first
                    ">
                    <mat-icon *ngIf="info">{{ info }}</mat-icon>
                    <ng-container>{{ breadcrumb | titlecase }}</ng-container>
                </ng-container>
            </xng-breadcrumb>

            <ng-template #separatorTemplate>
                <mat-icon>arrow_right</mat-icon>
              </ng-template>

if you not mind kindly share some stackblitz example for my understanding.

even though i'm passing value like

const fName = resp.firstName;
this.breadcrumbService.set('internal-user/:userId', fName);

am getting like below attachment

Thank you :)

[udayvunnam]

@suriyaJaay I guess you haven't used @ if you are updating the label by the alias. Please check https://udayvunnam.github.io/xng-breadcrumb/#/dynamic-breadcrumb.

If the issue still persists, can you please provide a reusable example from https://stackblitz.com/edit/angular-xng-breadcrumbs

[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