Breadcrumb displays ** when same component is navigated reclusively using route config - path: '**'. Breadcrumb on UI doesn't update event after using breadcrumbService.set('@alias', 'updated Value')

[patilms16]

Hi,

Does xng-breadcrumb support dynamic append when same component is called recursively using path: '**'

I have a requirement where I need to navigate to same component reclusively for user interface which displays Table view for file manager ( i.e. display Folder/subfolder contents with unknown hierarchy )

Angular: ^15.0.0 xng-breadcrumb : ^9.0.0

Route would be : /home/repo/:repoName/:selectedFolder/:subFolder1/:subfolder2/:subfolder3/... and so on Expected Breadcrumb : Home > Repo > Test_Repo > Folder 1 > subFolder 1 > subFolder 2 > subFolder 3

app.routing : { path: 'home', loadChildren: () => import('./modules/test-manager/home.module').then( (m) => m.homeModule ) }

home-module-routing : { path: '', component: HomeComponent, data: { breadcrumb: {label: 'Home' } } }, { path: 'repo', component: RepoComponent, data: { breadcrumb: {label: 'Repo' } }, children: [ { path: ':selectedRepo', children: [ { path: '', component: TableViewComponent, data: { breadcrumb: { alias: 'selectedBucket' } } }, { path: '**', component: TableViewComponent, data: { breadcrumb: {alias: 'selectedFolder'}} } ] } ] } With above config, breadcrumb displayed as : Home > Repo > Test_Repo > **

I am navigating to the route from my component using : this.router.navigate([/home/repo/${this.repoName}/${event?.data?.name}], {queryParams: {currentPath: event?.data?.name}});

I debugged the function updateCurrentBreadcrumbs() and it is correctly forming the label for above path : { "alias": "selectedFolder", "label": "Folder 1/", "routeLink": "/home/repo/Test-Repo/**", "isAutoGeneratedLabel": false, "queryParams": { "currentPath": "Folder 1/" }, "fragment": null, "skip": false }

However breadcrumb on UI still shows ** instead of 'Folder 1/'.

I also tried calling set method but it doesn't have any impact : this.breadcrumbService.set('@selectedFolder', {label: params.get('currentPath')});

Also tried to manually trigger change detection after this but no update on UI.

Can someone please review and let me know any alternative for this or anything incorrect with above approach?

Also Can xng-breadcrumb library support appending the breadcrumb if same component is called in case selecting subfolders further?

Thank you for your help!!

[github-actions[bot]]

👋 Hey @patilms16
Thanks for flagging your first issue! We're on it! Please provide all the details you can
Got a fix? Send a PR! 🚀 Check out our local dev guide

If you like this project, please ⭐star⭐ our repo.