Comments (6)
👋 @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.
from xng-breadcrumb.
@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
from xng-breadcrumb.
@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.
from xng-breadcrumb.
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 :)
from xng-breadcrumb.
@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
from xng-breadcrumb.
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
from xng-breadcrumb.
Related Issues (20)
- Breadcrumb link disappears on CanDeactivate guard check HOT 4
- Accessibility on breadcrumb's separator HOT 3
- "[preserveQueryParams]" is not working after page refreshed. HOT 4
- Translation Support HOT 2
- Unable to setup breadcrumb for certain route paths HOT 7
- Breadcrumbs are not displayed for lazy loaded module HOT 3
- update xng-breadcrumb demo app that uses Material UI HOT 7
- Module not found when using BreadcrumbService from another module in which the BreadCrumbsModule is imported HOT 2
- Set multiple breadcrumbs regardless of route HOT 10
- Need docs! HOT 2
- xng-breadcrumb not working in Angular Ionic HOT 2
- Hiding the breadcrumbs with one level only HOT 3
- Breadcrumb doesn't work on routes using `matcher` HOT 5
- Property '"autoGenerate"' is incompatible with index signature. HOT 3
- Double rendering with provideClientHydratation Angular 16 HOT 4
- Customizing breadcrumb HOT 3
- Breadcrumb Links Not Working HOT 4
- Breadcrumb labels no longer working with loadChildren HOT 5
- Duplicate breadcrumbs on Angular 17 HOT 6
- Support for Angular 17 HOT 16
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from xng-breadcrumb.