udayvunnam / xng-breadcrumb Goto Github PK
View Code? Open in Web Editor NEWA lightweight, configurable and reactive breadcrumbs for Angular 2+
Home Page: https://udayvunnam.github.io/xng-breadcrumb
License: MIT License
A lightweight, configurable and reactive breadcrumbs for Angular 2+
Home Page: https://udayvunnam.github.io/xng-breadcrumb
License: MIT License
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
After I have used the command
"npm i xng-breadcrumb"
I get the an error on BreadcrumbModule
Angular Version:
PS I:\workspaces-angular-ts\angular-tour-of-heroes\angular-tour-of-heroes-pt5> npm version
{
'angular.io-example': '0.0.0',
npm: '6.14.8',
ares: '1.16.1',
brotli: '1.0.9',
cldr: '37.0',
icu: '67.1',
llhttp: '2.1.3',
modules: '83',
napi: '7',
nghttp2: '1.41.0',
node: '14.15.0',
openssl: '1.1.1g',
tz: '2020a',
unicode: '13.0',
uv: '1.40.0',
v8: '8.4.371.19-node.17',
zlib: '1.2.11'
}
Angular CLI: 11.2.4
Node: 14.15.0
OS: win32 x64
Angular: 11.0.9
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1100.7
@angular-devkit/build-angular 0.1100.7
@angular-devkit/core 11.0.7
@angular-devkit/schematics 11.2.4
@angular/cli 11.2.4
@schematics/angular 11.2.4
@schematics/update 0.1102.4
rxjs 6.6.6
typescript 4.0.7
## 🔥 Exception or Error
"class BreadcrumbModule
Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class.
This likely means that the library (xng-breadcrumb) which declares BreadcrumbModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.(-996002)"
Clicking on breadcrumb which should go to /util/r/newreport doesn't seem to map or route there. Going to the route in the url works fine. What could this be?
Describe the bug
A clear and concise description of what the bug is.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
A clear and concise description of what you expected to happen.
Screenshots
If applicable, add screenshots to help explain your problem.
Desktop (please complete the following information):
Smartphone (please complete the following information):
Stackblitz example:
Can you create a minimal reproducible example with the issue you are facing?
To help you start with, refer to the Stackblitz example - stackblitz.com/edit/angular-xng-breadcrumbs.
Additional context
Add any other context about the problem here.
Hi there,
I am using version "xng-breadcrumb": "^2.1.1" for my Angular version 6 project and faced the following issue:
My route of the url has 5 level. It works fine with the route with 3 level. When an user clicks at level 4 and 5, the breadcrumb name is replaced with an unexpected value. I attached the screenshot to describe the issue below.
Hope to hear from you soon. Thanks in advance!
It works good at this level. When we go to the next level (click at "test"). The text "Bananen" is replaced with "Aareon" which we don't expect.
If we click at the second "Aareon", it goes back to the first image. It is correct (but not the text)
This is started to happen in the latest version.
Version 6.2.1 is working.
https://i.imgur.com/hwZ62th.png
That first item should not be there.
I would like to be able to construct a breadcrumb item using data retrieved with an Angular resolver.
Maybe by leveraging breadcrumb as a function ?
{
path: '/orders',
children: [{
':id',
resolve: {
resolvedOrder: 'orderResolver'
},
data: {
breadcrumb: (resolvedOrder: Order) => `Viewing order number ${resolvedOrder.orderNumber} now`
}
}]
}
Hello,
thank you very much for this plugin.
I was wondering how you can customize the look of the breadcrumb, css? separator?
Feature request - #13
Using the latest version of this package requires changing the project target version to ES2015.
Is it possible to change the project target to ES5?
yarn the breadcrumb on an ES5 solution.
Angular Version:
9
Scully Version:
N/A
"ERROR in getInternalNameOfClass() called on a non-ES5 class: expected BreadcrumbItemDirective to have an inner class declaration"
When I add "this.router.routeReuseStrategy.shouldReuseRoute = () => false;" to the constructor of my component breadcrumbs freezes and does not change even after change in routes.
Here is the link of stackblitz where I have reproduced the issue
https://stackblitz.com/edit/angular-xng-breadcrumbs-nesting-poc-yyepxq?file=src/app/app.component.ts
Hello, my routes looks like this:
const routes: Routes = [
{path: '', pathMatch: 'full', component: UsersComponent, data: {breadcrumb: 'Users'}},
{path: 'add', component: AddUserComponent, data: { breadcrumb: 'Add new'}},
{path: ':userId', component: ShowUserComponent, data: {breadcrumbAlias: 'userFullname'}},
{path: ':userId/edit', component: EditUserComponent, data: {breadcrumbAlias: 'userFullname', breadcrumb: 'Edit'}}
];
How to setup the last route to have breadcrumb like:
Users / Full Name / edit
I have tried different things like the one above without success
Hi,
is it possible to disable the preservation of the fragment?
Regards
Benny
I was trying to use this component but it seems CSS not working for my project
I have tried to use it like below in my app.component
but when I run it shows like below
as you can see its plain breadcrumbs without any link also separator is not working as mentioned in the code
I have injected a module in my app module like below
Angular Version:
~12.0.1
Note: I am not using any angular material is that can be the cause?
I am using the IONIC framework and components
Describe the bug
Whenever using breadcrumbs, and you have a parametrized route, breadcrumb doesnt save the parameters so you can navigate back
To Reproduce
Steps to reproduce the behavior:
https://stackblitz.com/edit/angular-9-starter-material-hhqmpb
1.Navigate to stackblitz.
2. Click on 'Catalog' link (first bread crumb will appear)
3. Click on any movies link (2nd bread crumb will appear)
4. Click 'Catalog' Breadcrumb
5. Notice URL does not contain proper id parameter
Expected behavior
Routing parameters should be saved when routing back on breadcrumbs
Desktop (please complete the following information):
I can see your breadcrumb is not observable from the store to the html.
This is not compatible with full of partial "onPush" angular apps.
this.breadcrumbs
needs to be an observable (no subscribe in ngOnInit) and use the pipe async
into the HTML.
Angular: 11.2.2
Breadcrumb: 6.6.0
I am having an issue, when I wrap xng-breadcrumb inside another component(app-custom-breadcrumb) and this component is used with a ngIf sentence(to know device resolution), it seems to get an empty route
Originally posted by @nativeforest in #44 (comment)
The existing instances of breadcrumb.set()
have stopped working. Debugging into it and seeing what is expected, I have changed the alias node in my routes to include the @
prefix and this seems to work. (breadcrumb: { alias: '@id' } }
).
I am assuming this is a bug, if confirmed, rather than being intentional?
Originally posted by @chad-smith in #43 (comment)
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
Thanks
Hello,
is there a way to change/manipulate the breadcrumbs?
My router file looks like this:
path: 'servers', component: ServerListComponent, data: { breadcrumb: 'Servers' }}, -> App / Servers
path: 'server/:id', component: ServerDetailComponent, data: { breadcrumb: { alias: 'serverName' }}}, -> App / Webserver 1
Since servers doesn't have a router-outlet for server/:id it cant be a child route. But I want the breadcrumbs like
App / Servers / Webserver 1. Is this possible to archiv?
Many greetings
Currently, if you try to click a link with the middle mouse button, nothing happens.
Originally posted by @borisBelloc in #80
I'm not sure but I think I'm looking to make the link [href]
rather than using [routerlink]
NA
"Importing BreadcrumbModule which does not have a ɵmod property" when running unit tests (Jest).
-> Update project to Angular 13.
-> Run tests (Jest)
MacOs BigSur
Node v14.15.4
NPM 6.14.11
Jest 27.3.1
Angular 13
Importing BreadcrumbModule which does not have a ɵmod property
To be able to show only the last 4 breadcrumbs. Any preceding breadcrumbs will be displayed as ".." to prevent clutter.
In order to be able to do this, it would be useful to know the index
and length
of the xngBreadcrumbItem
array in HTML.
<xng-breadcrumb>
<ng-container *xngBreadcrumbItem="let breadcrumb; let first = first; let last = last; let index = index; let length = length; let count = count;">
<i *ngIf="first" class="fa fa-home"></i>
<!--show only 2 dots-->
<ng-container *ngIf="!first && index < (count - 4)">..</ng-container>
<!--show the last 4 breadcrumbs-->
<ng-container *ngIf="!first && index >= (count - 4)">{{ breadcrumb }}</ng-container>
</ng-container>
</xng-breadcrumb>
Just as there is first
and last
, it would be very useful to have an index
and count
to be able to perform such functionality in HTML.
I considered using the .set. However, at module level the currentBreadcrumb array is still empty and I cannot bind an OnAfterViewInit event to the module. This can be done with an onAfterBreadcrumbsLoaded event.
Another alternative would be a limit
parameter to do this more automatically.
@udayvunnam Hi I am facing issues when i refresh the browser page , the breadcrumb disappears any fix for this issue , Please let me know thanks
I have using angular version 8+. and installed xng-breadcrumb version 6+. But I got an error like this. how to I solve it?
`ERROR in node_modules/xng-breadcrumb/lib/breadcrumb.component.d.ts:48:9 - error TS1086: An accessor cannot be declared in an ambient context.
set separator(value: string | TemplateRef<void>);
~~~~~~~~~
node_modules/xng-breadcrumb/lib/breadcrumb.component.d.ts:49:9 - error TS1086: An accessor cannot be declared in an ambient context.
get separator(): string | TemplateRef;
~~~~~~~~~
`
I'm having a small issue with the url behind the breadcrumbs
this is my route config:
{ path: '', pathMatch: 'full', component: HomePageComponent, data: { breadcrumb: 'home' } },
{
path: 'sites', component: SitesComponent, children: [
{ path: '', component: SitePageComponent, data: { breadcrumb: 'sites' } },
{
path: ':siteId/software', component: ListComponent, data: { breadcrumb: 'Software' } , children: [
{ path: '', component: SoftwareListComponent },
{ path: ':softwareId/instances', component: InstancesComponent, data: { breadcrumb: 'Instances' }},
]
},
]
},
The issue I'm having is that the way the breadcrumbs show up on my website is all fine, but when I click on software it tries to route me to:
Instead of for example
I'm probably missing something really obvious but, if anybody could help me I would appreciate it very much
I'm part way through integrating this library into a mature app and am really impressed with how flexible and powerful it is. Great work!
One quirk of our existing routing is that from a list page /items
, an individual item would be located at /items/view/X452
.
The path for this route is expressed as:
{
path: '/items',
children: [{
'view/:id'
}]
}
And the auto generated breadcrumb trail is
Home / Items / view/X452
I can resolve this on per page basis by using breadcrumbService.set
, but given the data I want is already in the params, it would be nice for the breadcrumb label to be able to interpolate these values.
A more common use-case for this might be:
{
path: '/orders',
children: [{
':id',
data: { breadcrumb: 'Viewing order :id` }
}]
}
Which would generate
Home / Orders / Viewing order 45
I have assumed a simple interpolation syntax in the breadcrumb label above.
I've had a look at the code and would be reasonably confident creating a pull request for this, but I wanted to raise it as a feature request first to gather your feedback on the idea.
Thanks! 🙂
Hi,
setting breadcrumb in a lazy loaded child module with empty route is not working.
My parent Route:
{
path: 'courses',
data: {
breadcrumb: 'Deine Kurse'
},
loadChildren: () => import('./courses/courses.module').then(mod => mod.CoursesModule)
},
Route in the child module:
{
path: '',
pathMatch: 'full',
component: CoursesOverviewComponent,
data: {
breadcrumb: 'Deine Kurse Neu'
}
},
This ends in no custom breadcrumb data at all. If I remove the breadcrumb from the child, the value from the parent is shown. If the route from the child is not empty, everything is working fine. No data on the parent also makes no difference.
Regards
Benny
On refresh breadcrumb gets disappeared!!
Is your feature request related to a problem? Please describe.
If my breadcrumbs look like this : Pages / ShadowGroup / Page1
, I want to remove the routerLink from the ShadowGroup
. It can occurs when you need to explain to the user where he is, but without giving a route that has no meaning
Describe the solution you'd like
At least an option like data: { breadcrumb: {unlink: true, label: 'ShadowGroup'}
. The default style should be like a hint-text.
The best would be to pass the full template to the breadcrcumb and add a <a>
or not based on the data.info
.
Describe alternatives you've considered
I thought about reorganize routes to have only ShadowGroup / Page1
, but you lose the precision of the Pages
parent.
I can also redirectTo, but it's a real mess for the user to understand what's happening.
Breadcrumbs use a (click) handler for navigation, and do not have a [href] attribute. Pressing tab key to navigate will skip these links. They should either have a href attribute, or then add a tabindex=0 (or customizable).
Edit: Also, if you add tabindex programatically to the <a>
tags, you cannot activate the link with a keyboard, as it only has a (click)
handler, no keyboard handlers.
Any regular use
Angular Version:
Angular: 9.1.12
Node: 15.0.1
OS: darwin x64
xng-breadcrumb version
6.3.4
I have found some odd behaviour when defining empty paths, it's quite fiddly to explain in text, so I have altered the demo site to reproduce my findings.
If you apply the changes in chad-smith/xng-breadcrumb@master...demo-data-bug you will find that neither of the breadcrumbs being set are used.
After a bit of poking around, I found the following:
data: { breadcrumb: ...}
makes no differencedata: { breadcrumb: ...}
resolves the issuedata: {}
_ in the module causes the issue!Scenario 3 is why the project I'm using breadcrumbs on has been seeing the problem (we use the data attributes frequently for permissions).
NB: If you deviate from an empty path, you will see both breadcrumbs as expected.
I thought this might be related to #25 because using the 'hack' that was described there also seems to work.
Trying to use:
::ng-deep .xng-breadcrumb-trail {
color: white;
background-color: red;
}
in my app.component.scss file
to change the trail text to be white.
Background color goes red but text color is stuck black.
Angular Version:
11.2.2
ng --version
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 11.2.1
Node: 12.18.2
OS: linux x64
Angular: 11.2.2
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1102.1
@angular-devkit/build-angular 0.1102.1
@angular-devkit/core 11.2.1
@angular-devkit/schematics 11.2.1
@angular/cdk 11.2.1
@angular/cli 11.2.1
@angular/material 11.2.1
@schematics/angular 11.2.1
@schematics/update 0.1102.1
rxjs 6.6.3
typescript 4.1.5
## 🔥 Exception or Error
Describe the bug
Best described at : https://stackoverflow.com/questions/57593945/xng-breadcrumb-with-different-layout
To Reproduce
See: https://stackblitz.com/edit/xng-breadcrumb-65zaym?file=src%2Fapp%2Fapp.routing.module.ts
2a. Click to login route.
3a. Click back to home - see it isn't displayed.
Expected behavior
Breadcrumb should be displayed for all home routes.
Hello,
I have layout-routing.module.ts
which has:
const routes: Routes = [
{
path: '', component: LayoutComponent, data: {breadcrumb: 'my app name'}, children: [
{path: 'home', loadChildren: '../home/home.module#HomeModule'},
{path: 'users', loadChildren: '../users/users.module#UsersModule'},
{path: 'login', loadChildren: '../login/login.module#LoginModule'},
{ path: '**', redirectTo: '/home', }
],
},
];
and then users-routing.module.ts
const routes: Routes = [
{path: '', pathMatch: 'full', component: UsersComponent, data: {breadcrumb: 'Users'}},
{path: 'add', component: AddUserComponent, data: { breadcrumb: 'Add new'}},
{ path: ':userId', data: {breadcrumbAlias: 'userFullname'}, children: [
{path: '', component: ShowUserComponent},
{path: 'edit', component: EditUserComponent, data: {breadcrumb: 'edit'}}
]}
];
What I would like to have is to have my app name always first part of the breadcrumb, is this possible this way?
Hi,
when I configure separator attribute with the '>' symbol it renders ok but also adds default separator '/'. At the end we have a breadcrumb seems like 'somelabel > / anotherlabel'
I've got installed latest 3.6.0 version.
Thanks in advance.
Is your feature request related to a problem? Please describe.
Breadcrumbs will be shown by default event if there is no breadcrumbs specified for a path. User have to explicitely define not to show breadcrumbs as per the comment - #1 (comment)
Describe the solution you'd like
Make this behaviour optional. Provide a boolean flag that can turn this behaviour off
Describe alternatives you've considered
It might be possible that part of application needs the above default behaviour and other part of routes may not need this behaviour. tackle this problem
Additional context
This will not break any existing behaviour, just adds additional behaviour.
At First thankyou for the wonderfull plugin,
Describe the bug
I have a company dropdown on the header component which is placed inside layout component,if any change in that dropdown, i have to reload the widgets and table data to fetch the company related datas,
So instead of hard reloading the page, we using the below code on dropdown change
this.router.routeReuseStrategy.shouldReuseRoute = function() {
return false;
};
const currentUrl = this.router.url;
this.router.navigateByUrl(currentUrl).then(() => {
this.router.navigated = false;
this.router.navigate([currentUrl]);
});
then breadcumb is not updating and showing the old values, even when i navigate to any pages.
But if i browser reload the whole page, breadcumb working properly, the issue only occurs after header dropdown change.
I have been stuck on this breadcumb issue, please help.
A way to be able to say if you want to translate the text or not.
For example, from a customer list screen, to data of the selected customer.
Customers > (Customer's name) > personal information
To change the name of the client I am using "alias", but I can't find a way to detect in html if this data or another data like "translate" is coming.
For example, when passing "translate: false" do not translate the text.
const route: Route[] = [
{
path: '',
component: ClientesListaComponent,
data: {
breadcrumb: {
skip: false,
label: 'TITLE_CLIENTS',
translate: true
},
},
},
{
path: ':id',
component: ClienteComponent,
data: {
breadcrumb: {
skip: false,
label: 'TITLE_CLIENT',
alias: 'aliasCliente',
translate: false
},
},
<xng-breadcrumb [separator]="iconTemplate" class="hidden sm:flex flex-wrap items-center font-medium">
<ng-container *xngBreadcrumbItem="let breadcrumb; let translate;">
<ng-container *ngIf="translate">{{ breadcrumb | transloco | titlecase }}</ng-container>
<ng-container *ngIf="!translate">{{ breadcrumb | titlecase }}</ng-container>
</ng-container>
</xng-breadcrumb>
<ng-template #iconTemplate>
<mat-icon class="icon-size-5 text-secondary" [svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
</ng-template>
For the time being, no
When I set a label with service for path chunk that was already autogenerated, it remains autogenerated and is filtered by [autoGenerate]="false" property.
Service BreadcrumbService creates BreadcrumbDefinition with isAutoGeneratedLabel = true;
It's still autogenerated after we set label within a component.
I think we should reset isAutoGeneratedLabel if it is set by user in any time
here:
<xng-breadcrumb [autoGenerate]="false" [preserveFragment]="false"></xng-breadcrumb>
{
path: ':id',
data: {
breadcrumb: {
alias: BreadcrumbAlias.wallet,
} as BreadcrumbObject,
},
ngOnInit(): void {
this.breadcrumbService.set(`@${BreadcrumbAlias.account}`, { skip: false });
this.breadcrumbService.set(`@${BreadcrumbAlias.wallet}`, this,wallet.title);
}
Result: My breadcrumb is filtered in BreadcrumbComponent. So it's not visible for user
Angular Version:
Angular CLI: 11.2.2
Node: 14.16.1
OS: win32 x64
Angular: 11.2.3
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes
Ngx-breadcrumb Version
xng-breadcrumb: 6.6.1
Error during import BreadcrumbModule.
I found that the BreadcrumbModule is empty
https://ibb.co/26C34rH
Angular Version:
@angular-devkit/architect 0.1301.1
@angular-devkit/build-angular 13.1.1
@angular-devkit/core 13.1.1
@angular-devkit/schematics 13.1.1
@angular/cli 13.1.1
@angular/flex-layout 13.0.0-beta.36
@schematics/angular 13.1.1
rxjs 7.4.0
typescript 4.4.4
Describe the bug
I have some routes which have query params. e.g.
route1: statements (no query params)
route2: statement/:statementId?key=value
route3: statement/:statementId/:otherroute?key=value&key2=value2
When I navigate to route3 I am finding that my route1 and route2 are getting assinged the query params from route3
I think the issue is in the resolveQueryParam method. It seems to be assigning the queryParams to the all the routes (not just the route that requires them)
When we use router with query param, bread crumbs module do not save these param.
Maybe, can you add this feature to module?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.