udayvunnam/xng-breadcrumb

A lightweight, configurable and reactive breadcrumbs for Angular 2+

xng-breadcrumb

A lightweight, declarative and dynamic breadcrumbs solution for Angular 6 and beyond. https://www.npmjs.com/package/xng-breadcrumb

Why Choose Breadcrumbs?

Simplify Navigation: Breadcrumbs are vital in applications with deep navigation hierarchies, offering users an intuitive way to traverse back to higher levels effortlessly.

Documentation

For a step by step guide on integrating xng-breadcrumb into your Angular application, visit the Documentation.

Demo App

Explore our Demo App - showcasing the power of xng-breadcrumb in an Angular setup. Experience seamless breadcrumb navigation as you browse through various links!

Features

• ✅ Zero configuration: Just add <xng-breadcrumb></xng-breadcrumb> anywhere in the app.Breadcrumb labels are automatically generated by analyzing Angular Route configurations.

• ✅ Custom labels:Define custom labels for each route via Angular Route Configurations, enhancing breadcrumb clarity and relevance.

• ✅ Update labels dynamically: Change breadcrumb labels dynamically using BreadcrumbService.set(), utilizing either route path or route alias.

• ✅ Skip breadcrumb: Conditionally exclude specific routes from breadcrumb display

• ✅ Disable breadcrumb: Can disable specific routes in breadcrumbs to prevent navigation to intermediate states .

• ✅ Customization: Customize breadcrumb template to display icons with label, apply text formatting using pipes, integrate i18n with ngx-translate, and more.

• ✅ Styling and Seperators: Easily customize breadcrumb separators and styles to match your application's design

• ✅ QueryParams and Fragment: Preserves QueryParams and Fragement while navigating via breadcrumbs

• ✅ SSR: Supports server side rendering with nguniversal

❤️ Become a Sponsor!

Thanks goes to these wonderful people (emoji key):

Uday Vunnam 💻 📖 🚧	anthonythiry 💻	dedrazer 💻	Danny Feliz 📖	Kapsky 💻	Andrei Cojea 📖	Jonathan 💻
Pavan Kumar Jadda 💻	Leon Fretter 💻	Lukáš Matta 📖	Glenn Latomme 💻	Ovidiu Haureș 💻
Add your contributions

This project follows the all-contributors specification. Contributions of any kind welcome!

To add new contributor username, who made a contribution of type contribution:

pnpm all-contributors add <username> <contribution> Example: pnpm all-contributors add jfmengels code,doc

xng-breadcrumb's Issues

path parameter undefined

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:

http://localhost:4200/sites/Undefined

Instead of for example

http://localhost:4200/sites/3/software

I'm probably missing something really obvious but, if anybody could help me I would appreciate it very much

CSS and separator not working

🐞 Bug report

I was trying to use this component but it seems CSS not working for my project

Description

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

Empty BreadcrumbModule

🐞 Bug report

Description

Error during import BreadcrumbModule.
I found that the BreadcrumbModule is empty
https://ibb.co/26C34rH

💻Your Environment

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

Can not add xng-breadcrumb to my project

🐞 Bug report

Description

After I have used the command
"npm i xng-breadcrumb"
I get the an error on BreadcrumbModule

🔬 Minimal Reproduction

💻Your Environment

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

DIsable Fragment preservation

Hi,

is it possible to disable the preservation of the fragment?

Regards
Benny

Show only the last few breadcrumbs.

🧩 Feature request

To be able to show only the last 4 breadcrumbs. Any preceding breadcrumbs will be displayed as ".." to prevent clutter.

Description

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>

Describe the solution you'd like

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.

Describe alternatives you've considered

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.

Breadcrumb disappeared in deployed Demo App on Refresh

On refresh breadcrumb gets disappeared!!

Breadcrumbs are shown by default, even if there is no breadcrumbs specified for a path. Make this behaviour optional.

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.

Throw error with clear message when breadcrumbs aren't properly set. When setForAlias is called on a non Alias route item etc

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

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

PFA,

Thanks

xng-breadcrumb freezes when we use "this.router.routeReuseStrategy.shouldReuseRoute = () => false;"

🐞 Bug report

Description

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.

🔬 Minimal Reproduction

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

Parameterized Routes not working

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

• OS: Win10
• Browser: Chrome
• Version: Latest enough

"export 'ɵɵinject' was not found in '@angular/core'. Error for Angular 6,7 projects

Describe the bug
After following the install guide of XngBreadcrumb for an Angular 7 project getting error.

To Reproduce
Steps to reproduce the behavior:

1. Follow install guide
2. Import BreadcrumbModule and place component

Expected behavior
No error should be thrown.

Screenshots

Accessibility - breadcrumb <a> tags cannot be navigated with keyboard

🐞 Bug report

Description

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.

🔬 Minimal Reproduction

Any regular use

💻Your Environment

Angular Version:

Angular: 9.1.12
Node: 15.0.1
OS: darwin x64

xng-breadcrumb version
6.3.4

The demo page is down

Just letting you know that the demo page is not working.

QueryParams being assigned to incorrect routes

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)

Page Refresh the Breadcrumb disappears

@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

Child breadcrumb with empty path is ignored and replaces parent

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:

1. Removing the root data: { breadcrumb: ...} makes no difference
2. Removing the module data: { breadcrumb: ...} resolves the issue
3. Removing the breadcrumb label but keeping the data: {}_ 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.

Possibility to remove link from a breadcrumb

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.

make the breadcrumb's link middle or right mouse clickable to open it in new tab

🧩 Feature request

Description

Currently, if you try to click a link with the middle mouse button, nothing happens.

Originally posted by @borisBelloc in #80

Describe the solution you'd like

I'm not sure but I think I'm looking to make the link [href] rather than using [routerlink]

Describe alternatives you've considered

NA

Breadcumb not refreshing when reload the page state internally using shouldReuseRoute as false

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.

Defining breadcrump in child not working with empty route

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

How to customize the breadcrumb

Hello,

thank you very much for this plugin.

I was wondering how you can customize the look of the breadcrumb, css? separator?

multiple routing files

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?

Separator showing before first item

I am trying to get rid of the first separator but I am now convinced this is a bug.

I changed the background color of the breadcrumb link to make sure there was not a blank item before the first separator.

Can I get some help on how to fix this?

Angular 13: Importing BreadcrumbModule which does not have a ɵmod property

🐞 Bug report

Description

"Importing BreadcrumbModule which does not have a ɵmod property" when running unit tests (Jest).

🔬 Minimal Reproduction

-> Update project to Angular 13.
-> Run tests (Jest)

💻Your Environment

MacOs BigSur
Node v14.15.4
NPM 6.14.11
Jest 27.3.1
Angular 13

🔥 Exception or Error

    Importing BreadcrumbModule which does not have a ɵmod property

Node module error occurring

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;
~~~~~~~~~
`

How to get rid of elevated active link

The active link in the breadcrumbs is always elevated. Is this a bug? I cannot find it in the documentation and the live demo has all breadcrumbs in the same level. Please let me know how to resolve.

Ability to add custom icon in front of label

Feature request - #13

Empty breadcrumb at start

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.

Make set and setForAlias as one method. Just use @ prefix for alias name

Separator adds what's configured in attribute but also adds default separator

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.

Using params within breadcrumb label

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

Couldn't set label from component when [autoGenerate]="false"

🐞 Bug report

Description

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/libs/xng-breadcrumb/src/lib/breadcrumb.service.ts

Line 336 in 212571f

this.currentBreadcrumbs[itemIndex] = {

🔬 Minimal Reproduction

1. I've disabled "autoGenerate" option to manually control breadcrumb labels.

<xng-breadcrumb [autoGenerate]="false" [preserveFragment]="false"></xng-breadcrumb>

2. My route config have not label for path chunk

{
  path: ':id',
  data: {
    breadcrumb: {
      alias: BreadcrumbAlias.wallet,
    } as BreadcrumbObject,
  },

3. But I've set a label in the component:

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

💻Your Environment

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

Breadcrumb after dynamic param

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

A way to be able to say if you want to translate the text or not.

🧩 Feature request

Description

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.

Describe the solution you'd like

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>

Describe alternatives you've considered

For the time being, no

Change breadcrumbs manually

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

Using Angular resolver in breadcrumb as a function

🧩 Feature request

Description

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`
    }
  }]
}

Clicking on Breadcrumb doesn't route

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?

Styling in .scss isn't taking effect for .xng-breadcrumb-trail color

🐞 Bug report

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.

Description

Background color goes red but text color is stuck black.

🔬 Minimal Reproduction

💻Your Environment

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

Breadcrumb not refreshed when calling `breadcrumbService.set()`

🐞 Bug report

Description

I can see your breadcrumb is not observable from the store to the html.

xng-breadcrumb/libs/xng-breadcrumb/src/lib/breadcrumb.component.ts

Line 92 in f63924f

this.breadcrumbs = breadcrumbs

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.

💻Your Environment

Angular: 11.2.2
Breadcrumb: 6.6.0

Breadcrumb text is replaced with an unexpected value

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)

When click the Home link of breadcrumb routing is not working

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

On initial SPA page load, the breadcumb bar is empty.. it refreshes and starts working after I navigate to other url within the site.. Any help/pointer would be much appreciated. Thx.

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

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

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

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.

Navigate with query params

When we use router with query param, bread crumbs module do not save these param.
Maybe, can you add this feature to module?

when xng-breadcrumb is wrapped with an ngIf (to know device resolution), its seems to get an empty route

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 set method does not immediately change the breadcrumbs.

I get api data and try to dynamically change breadcrumbs. But the changes are applied only after the route or its parameters change

The breadcrumb cannot be used on ES5

🐞 Bug report

Using the latest version of this package requires changing the project target version to ES2015.

Description

Is it possible to change the project target to ES5?

🔬 Minimal Reproduction

yarn the breadcrumb on an ES5 solution.

💻Your Environment

Angular Version:

9

Scully Version:

N/A

🔥 Exception or Error

"ERROR in getInternalNameOfClass() called on a non-ES5 class: expected BreadcrumbItemDirective to have an inner class declaration"

xng-breadcrumb with different layout

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

1. Load the app - notice the breadcrumb isn't displayed.
2. Click to the 'child' route. See it is displayed.
3. Click back to 'home'. See it is displayed.

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.

alias is not not working

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)