Prepend breadcrumb with xng-breadcrumb

Question

I'm using xng-breadcrumb to handle the generation of breadcrumbs in an Angular 13 application. In general this works like a charm but I'm missing one feature. In AngularJS I used the angular-breadcrumb package and I could define a parent breadcrumb. Is this kind of functionality available?

I have the following routes (abstracted):

{
  path: 'account/:id', pathMatch: 'prefix',
  children: [
    {
      path: '', pathMatch: 'full', redirectTo: 'page1',
      data: {
        breadcrumb: {
          alias: 'account'
          // Would be nice to be able to add something like:
          // parent: 'accounts'
        }
      }
    },
    {
      path: 'page1',
      data: {
        breadcrumb: 'page 1'
      }
    },
    {
      path: 'page2',
      data: {
        breadcrumb: 'page 2'
      }
    },
  ]
}

I can update the account alias with the proper account number but I would also like to prepend this with another string to get for example:

You are here: accounts / 1234-56-789 / page 1

I can place the additional text while resolving the alias but this isn't styled the same way. Is it possible to add the text as an additional breadcrumb?

Answer 1

Don't think you need a library to do this.

Here is an example for you :

https://stackblitz.com/edit/angular-ivy-pvyww3?file=src%2Fapp%2Fapp.module.ts,src%2Fapp%2Fcrumb.resolver.ts,src%2Fapp%2Fapp.component.html,src%2Fapp%2Fhello.component.ts