rajaramtt / ng7-dynamic-breadcrumb Goto Github PK
View Code? Open in Web Editor NEWAngular 10 Dynamic Breadcrumbs
License: MIT License
Angular 10 Dynamic Breadcrumbs
License: MIT License
I'm in case that I have a route that may be reached from multiple routes..so how can I manage previous (parent) name in the breadcrumb dynamically ?
Hi,
It's my first time to use this module and I'm also new to Angular. It's working fine it's just that, when I refresh the page all the routes displayed in the breadcrumb disappears. What's left is just a blank component. This also happens when i first navigate to the first level, it will only shows the breadcrumbs content when I route to the second level and go back to the first level.
Thanks.
I followed the steps from https://www.npmjs.com/package/ng7-bootstrap-breadcrumb
after following till step 4 my app gives nullInjectorError
the error is like:
Ng7BootstrapBreadcrumbService]: NullInjectorError: No provider for Ng7BootstrapBreadcrumbService! NullInjectorError: StaticInjectorError(AppModule)[Ng7BootstrapBreadcrumbComponent -> Ng7BootstrapBreadcrumbService]: StaticInjectorError(Platform: core)[Ng7BootstrapBreadcrumbComponent -> Ng7BootstrapBreadcrumbService]: NullInjectorError: No provider for Ng7BootstrapBreadcrumbService! at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (http://localhost:1337/vendor.js:60219:25) at resolveToken (http://localhost:1337/vendor.js:71412:24) at tryResolveToken (http://localhost:1337/vendor.js:71356:16) at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (http://localhost:1337/vendor.js:71258:20) at resolveToken (http://localhost:1337/vendor.js:71412:24) at tryResolveToken (http://localhost:1337/vendor.js:71356:16) at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (http://localhost:1337/vendor.js:71258:20) at resolveNgModuleDep (http://localhost:1337/vendor.js:79728:29) at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (http://localhost:1337/vendor.js:80399:16) at resolveDep (http://localhost:1337/vendor.js:80770:45)
Is there anything else I need to implement?
Addressed in #49
Hello Raja,
Great job!, loved using this module.
Just one question: How is it possible to have a dropdown in breadcrumb something similar to this ?
Breadcrumb1 / Breadcrumb2 / Breadcrumb3 (dropdown)
where Breadcrumb3 is a dropdown with multiple selections.
Do you have any plan to incorporate this feature ?
Regards,
Alpesh
Love the project!
It would be awesome if you could inject a class(es) and it would apply it to the component. Right now the main way to change the styling is to use ng-deep which is deprecated or to add styles to the global class. Talking about the angular one specifically here. Might apply to the others.
(I know you can mess with view encapsulation but that causes other disliked side effects).
i have a node in the Breadcrumb and that node have URL with query string but unfortunately this cause an issue the(? and =) will convert to another chars
var breadcrumbs = [
{
"label": "Home",
"url": "/Home/Home"
},
{
"label": "Menu",
"url": "/Home/Menus"
},
{
"label": "Sections",
"url": "/Home/Menus/Sections?MenuID=1"
},
{
"label": "Items",
"url": ""
}
];
Error: Cannot match any routes. URL Segment: 'xx/xxxxx/Sections%3FMenuID%3D2
For people that is using angular universal SSR, for having a better SEO results, the usage of inline style it decreased seo marks for google page insights.
How to avoid url change when i click on bread brumb link
in our project, we used @ngx-translate
is very usefull specify in router config a field like "labeli18n" that will translate with
translator.instant("labeli18n") function
Ex:
breadcrumb: [
{ labeli18n: "permissions", url: '/main/controlpanel/users' },
]
will be
translator.instant("labelKey") =>
permissions -> Permessi in Italian
permissions -> Permissions in English
thank you for your plugin and good work
Hi,
I use ng-dynamic-breadcrumb version 6.0.0 but it's not complatible with @angular/common: 13.3.11 (Angular 13),
jenkins crash during deploy.
Is there a version compatible with Angular 13?
I'm having this error: Cannot read property 'pipe' of undefined when I run the command ng test. I'm using Angular 8.
Follows the full error:
TypeError: Cannot read property 'pipe' of undefined
error properties: Object({ ngDebugContext: DebugContext_({ view: Object({ def: Object({ factory: Function, nodeFlags: 33669121, rootNodeFlags: 1, nodeMatchedQueries: 0, flags: 0, nodes: [ Object({ nodeIndex: 0, parent: null, renderParent: null, bindingIndex: 0, outputIndex: 0, checkIndex: 0, flags: 1, childFlags: 33669121, directChildFlags: 33554433, childMatchedQueries: 0, matchedQueries: Object({ }), matchedQueryIds: 0, references: Object({ }), ngContentIndex: null, childCount: 2, bindings: [ ], bindingFlags: 0, outputs: [ ], element: Object({ ns: '', name: 'section', attrs: [ ], template: null, componentProvider: null, componentView: null, componentRendererType: null, publicProviders: null({ }), allProviders: null({ }), handleEvent: Function }), provider: null, text: null, query: null, ngContent: null }), Object({ nodeIndex: 1, parent: Object({ nodeIndex: 0, parent: null, renderParent: null, bindingIndex: 0, outputIndex: 0, checkIndex: 0, flags: 1, childFlags: 33669121, directChildFlags: 3 ...
at
at Ng7MatBreadcrumbComponent.breadCrumbData (http://localhost:9876/karma_webpack/node_modules/ng7-mat-breadcrumb/fesm2015/ng7-mat-breadcrumb.js:90:1)
at new Ng7MatBreadcrumbComponent (http://localhost:9876/karma_webpack/node_modules/ng7-mat-breadcrumb/fesm2015/ng7-mat-breadcrumb.js:51:1)
at createClass (http://localhost:9876/karma_webpack/node_modules/@angular/core/fesm2015/core.js:31991:1)
at createDirectiveInstance (http://localhost:9876/karma_webpack/node_modules/@angular/core/fesm2015/core.js:31807:1)
at createViewNodes (http://localhost:9876/karma_webpack/node_modules/@angular/core/fesm2015/core.js:44210:1)
at callViewAction (http://localhost:9876/karma_webpack/node_modules/@angular/core/fesm2015/core.js:44660:1)
at execComponentViewsAction (http://localhost:9876/karma_webpack/node_modules/@angular/core/fesm2015/core.js:44565:1)
at createViewNodes (http://localhost:9876/karma_webpack/node_modules/@angular/core/fesm2015/core.js:44239:1)
at createRootView (http://localhost:9876/karma_webpack/node_modules/@angular/core/fesm2015/core.js:44082:1)
at callWithDebugContext (http://localhost:9876/karma_webpack/node_modules/@angular/core/fesm2015/core.js:45632:1)
Ex:
this.router.navigate(['/products', 10], { queryParams: { productName: 'My product name' } });
will be 'My product name' in breadcrumb
Ex:
breadcrumb: [
{ label: '{{CustomText}}', url: '' }
]
and in component
export class MyComponent {
....
public get CustomText(){
return this.blabla.CustomProperty
}
....
}
i want to show id like you have explained in sample but its not working
{
path: 'page1/:pageOneID/page2/:pageTwoID',
component: Page2Component,
data: {
title: 'page2',
breadcrumb: [
{
label: 'page {{pageOneID}}',// pageOneID Parameter value will be add
url: '/page1/:pageOneID'
},
{
label: 'page {{pageTwoID}}',// pageTwoID Parameter value will be add
url: ''
}
]
},
},
at the place of pageOneID i want to show actual number instead of text
The url for this image is http://localhost:49158/products/1127
it should be like products/1127
See stackblitz example https://stackblitz.com/edit/ng7-dynamic-breadcrumb-o3dlce
Navigate to page 3, then click the "test param" button.
After clicking the button the dynamic breadcrumb labels stops working and only displays {{dynamicText}} page / {{customText}}.
I have a need to make the labels translated. It would be nice to inject the translateservice for translations
When i use:
"{{dynamicText}} page" as a label in routing definition
And set dynamicText with:
this.ng7MatBreadcrumbService.updateBreadcrumbLabels(breadcrumb);
in a component where breadcrumb is:
{dynamicText: 'abc'}
after loading the data, than:
Expected result:
{{dynamicText}} placeholder is not visible
Current result:
it is
Moreover calling:
this.ng7MatBreadcrumbService.updateBreadcrumbLabels(breadcrumb);
in constructor with empty dynamicText causes second call with data not update the dynamicText
Now, I use this package to develop my website.
First problem: can't use the Angular propriety children and if I use it breadcrumb generate error.
Second problem: when I refresh my page, breadcrumb is empty
thank you for this work
Angular 15 has been rollout in November 2022 but still there are no version upgrade for angular 15. We are getting an issues of peer dependencies with @angular/common 15 version.
Will you be providing any latest updates or not for angular 15? If yes then expected time would be?
./node_modules/ng7-dynamic-breadcrumb/fesm2015/ng7-dynamic-breadcrumb.js 131:0-27
"export 'ɵɵngDeclareClassMetadata' (imported as 'i0') was not found in '@angular/core'
Kindly provide your inputs on this issue https://stackoverflow.com/questions/56488509/ng7-dynamic-breadcrum-issue
I am developing a website with i18n module to translate between two languages.
This module doesn't support translation, so i tried to workaround using the method .updateBreadcrumb() every time i change the language and i pass respective labels like .updateBreadcrumb({"labelXYZ": "langENG"}) or .updateBreadcrumb({"labelXYZ": "langPT"})..
When i enter in a new page, the updateBreadcrumb is called and updates the the breadcrumb fine. But when i change the language in the menu i made, a language change event is triggered and i call again the method .updateBreadcrumb (with other language labels), but this time the breadCrumb doesn't change and continues with the old language.
If i change to other page, the breadcrumb updates to the new language selected before. But if i change again the language through menu and call .updateBreadcrumb again, nothing happens.
Is there a way to use updateBreadcrumb
with a URL that has query params?
Right now if I try something like:
this.breadcrumb.updateBreadcrumb([
{ label: 'Home', url: '/home' },
{ label: 'Page', url: '/page?param=something' },
]);
the rendered URL is /page%3Fparam%3Dsomething
which is breaking the page.
+1
Originally posted by @b4p3p in #13 (comment)
Hi guys,
I have just implemented ng7-bootstrap-breadcrumb but i can't edit the style!
I have tried 2 ways:
Someone can help me!? Thanks!
P.S, It's amazing project!
It breaks on Angular 14 (I also saw another issue on Angular 12).
Did an initial attempt at upgrading, but I do not think I got this right #45
My requirement is : I want to show one popup before redirection, and after user click on yes or no, redirection can be continue.
I couldn't figure out how to build breadcrumbs with parameters and nested routes: please consider the following:
app-routing.module
{path: ':id/foo', component: FooComponent, data: {
breadcrumb: [
{
label: 'Home',
url: '/'
},
{
label: '{{fooName}}',
// ==> this :id is repeated from the path
url: '/foo/:id'
},
]}},
{path: 'foo/:id/bar',
loadChildren: () => import('./bar/bar.module').then(mod => mod.BarModule)
},
....
bar-routing.module is contains the children routes for 'foo/:id/bar' :
{path: '', redirectTo: 'list', pathMatch: 'full'},
{path: 'list', component: BarComponent, data: {breadcrumb: [
...
{
label: '{{fooName}}',
// FIXME: cannot get to :id from parent route...
url: '/foo/:id'
},
...
So in the child routes, I'd like to access the :id parameter from the parent routes data... Any ideas or suggestions where I should modify the code ?
I'm using the https://github.com/rajaramtt/ng7-dynamic-breadcrumb/tree/master/projects/ng7-dynamic-breadcrumb project
By default i simple installed the npm module without define any breadcrumbs, but this leads to an error:
This is thrown in BreadCrumbComponent:75
Simple to reproduce, dont add any breadcrumbs, this will call update data with newBreadCrumb as null and null.map is not working, but as i see this, why call updateData with null as second parameter if this is the expected new Bread Crumb ? breadcrumb.component.ts:67
Yes i know i have to define some breadcrumbs to get a better result, but i think it should not crash just because i dont have registered Breadcrumbs.
npx @angular/cli@13 update @angular/core@13 @angular/cli@13
The installed local Angular CLI version is older than the latest stable version.
Installing a temporary version to perform the update.
√ Package successfully installed.
Using package manager: 'npm'
Collecting installed dependencies...
Found 44 dependencies.
Fetching dependency metadata from registry...
Package "ng-dynamic-breadcrumb" has an incompatible peer dependency to "@angular/common" (requires "^11.0.0" (extended), would install "13.2.2").
Package "ng-dynamic-breadcrumb" has an incompatible peer dependency to "@angular/core" (requires "^11.0.0" (extended), would install "13.2.2").
× Migration failed: Incompatible peer dependencies found.
Peer dependency warnings when installing dependencies means that those dependencies might not work correctly together.
You can use the '--force' option to ignore incompatible peer dependencies and instead address these warnings later.
See "C:\Users\sitruk.m\AppData\Local\Temp\ng-QG5S93\angular-errors.log" for further details.
Some of my routes rely on queryparams, an example being ?context=1
.
Currently, it seems impossible to set this queryparam in the breadcrumb url.
How can I do this?
I'm using custom labels in the routes.
When I visit the page for the first time, I can update the custom labels in the breadcrumbs, but when I try to update it on a button click, it doesn't work.
I am trying to use your module with Angular 12.2.5 and observing the following behavior
setup
"dependencies": {
"@angular/animations": "~12.2.5",
"@angular/cdk": "^12.2.5",
"@angular/common": "~12.2.5",
"@angular/compiler": "~12.2.5",
"@angular/core": "~12.2.5",
"@angular/flex-layout": "^12.0.0-beta.34",
"@angular/forms": "~12.2.5",
"@angular/material": "^12.2.5",
When I try to run application with ng serve
I get the following errors
Error: node_modules/ng-dynamic-breadcrumb/lib/ng-dynamic-breadcrumb.component.d.ts:6:22 - error NG6002: Appears in the NgModule.imports of AppLayoutModule, but could not be resolved to an NgModule class.
This likely means that the library (ng-dynamic-breadcrumb) which declares NgDynamicBreadcrumbComponent 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.
6 export declare class NgDynamicBreadcrumbComponent implements OnInit {
~~~~~~~~~~~~~~~~~~~~~~~~~~~~
please advise
I am using breacrumbs similar to this:
https://stackblitz.com/edit/ng7-mat-breadcrumb?file=src%2Fapp%2Fpage3%2Fpage3.component.ts
For Angular 7 (1.0.4)
When going to a page with custom parameter:
label: '{{dynamicText}} page'
I have noticed for a second {{dynamicText}} shows up before actual data loads.
Even if i put:
this.ng7MatBreadcrumbService.updateBreadcrumbLabels(breadcrumb);
in contructor of a class
Bit of a weird issue so I'll give the full context.
I have my component defined in the html to hide until I get all the data needed for it.
<app-ng7-mat-breadcrumb [hidden]="isLoading"></app-ng7-mat-breadcrumb>
Some basic code to get my data, set the breadcrumbs, and then show them
this.getInitialData().subscribe(
(appData) => {
const breadcrumb = { appName: appData.applicationName };
this.breadcrumbService.updateBreadcrumbLabels(breadcrumb);
console.log(this.breadcrumbService.breadcrumbLabels.value);
this.isLoading = false;
}
);
This works fine, but if I go back a page, then navigate here again using a different 'appName' it will still show the old one.
My relevant routes are
// First page to choose an app
{ path: 'applications', component: ApplicationsComponent },
// Second page to display details about that app
{
path: 'application/:appId', // Second page
component: ApplicationSummaryComponent,
data: {
title: 'App Details',
breadcrumb: [
{
label: 'Applications',
url: '/applications'
},
{
label: '{{appName}}',
url: ''
}
]
}
}
Example:
Initial Nav
Second Nav
Logs from above showing the breadcrumb service holding the correct value
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.