Breadcrumb after dynamic param

[Hesesses]

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

[udayvunnam]

@Hesesses

I have added the ability to add breadcrumbs for the base route, in the above example 'Users', with v2.0.0. Please update to the latest.

:userId and :userId/edit are siblings in your example, so only one of the route(breadcrumbs) would be considered at a time. Can you try declaring your routes like below, It should work!

const routes: Routes = [
  { path: '', pathMatch: 'full', component: UserComponent, data: { breadcrumb: 'Users' } },
  { path: 'add', component: AddUserComponent, data: { breadcrumb: 'Add new' } },
  {
    path: ':userId',
    data: {
      breadcrumbAlias: 'username'
    },
    children: [
      {
        path: '',
        component: ShowUserComponent,
        data: { breadcrumbAlias: 'userFullname' }
      },
      {
        path: 'edit',
        component: EditUserComponent,
        data: { breadcrumbAlias: 'userFullname', breadcrumb: 'Edit' }
      }
    ]
  }
];

I have tested your use case for Users / FullName / edit which worked with the above changes.

[udayvunnam]

Check the Demo App routes and breadcrumb mapping - https://github.com/udayvunnam/xng-breadcrumb/tree/master/projects/xng-breadcrumb-app/src/app

You can also play with the deployed demo app to check breadcrumbs - https://xng-breadcrumb.netlify.com/mentee/2/edit

[udayvunnam]

@Hesesses let me know if you still face any issues

[Hesesses]

works fine, thank you very much!