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?

Kindly provide your inputs on this issue https://stackoverflow.com/questions/56488509/ng7-dynamic-breadcrum-issue

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

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.

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

How to avoid url change when i click on bread brumb link

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?

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?

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

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.

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

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

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

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.

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.

+1

Originally posted by @b4p3p in #13 (comment)

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

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

Hi guys,

I have just implemented ng7-bootstrap-breadcrumb but i can't edit the style!

I have tried 2 ways:

1. By CSS's selectors, but I can't find a right one;
2. I can't use Input parameters by Ng7BootstrapBreadcrumbService even if I set my parameters in my node_module.

Someone can help me!? Thanks!

P.S, It's amazing project!

Addressed in #49

I have a need to make the labels translated. It would be nice to inject the translateservice for translations

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

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.

My requirement is : I want to show one popup before redirection, and after user click on yes or no, redirection can be continue.

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

1. can you set dynamicText by queryParams?

Ex:

this.router.navigate(['/products', 10], { queryParams: { productName: 'My product name' } });

will be 'My product name' in breadcrumb

2. can you set dynamicText by public property?

Ex:

breadcrumb: [
   { label: '{{CustomText}}',  url: '' }
]

and in component

export class MyComponent {
   ....
   public get CustomText(){
      return this.blabla.CustomProperty
   }
   ....
}

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)

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 ?

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:

1. "{{dynamicText}] page" shows up literally (with the placeholder being visible on the screen
2. When data are loaded {[dynamicText}} is replaced with the proper dynamicText

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

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.

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

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

./node_modules/ng7-dynamic-breadcrumb/fesm2015/ng7-dynamic-breadcrumb.js 131:0-27
"export 'ɵɵngDeclareClassMetadata' (imported as 'i0') was not found in '@angular/core'