routes rendering as a list

[jackweldon]

I've implemented the code as in the example on NPM but for some reason, which I can't fathom, Im getting the following output

but the Url is : products/Electrophoresis/categoryOne

This is my route config

  {
    path: 'products',
    data: {
      breadcrumbs: 'Products',
    },
    children: [
      {
        path: '',
        component: ProductDirectoryComponent,
      },
      {
        path: ':group',
        component: ProductGroupComponent,
        data: {
          breadcrumbs: true,
        },
        children: [
          {
            path: ':category',
            component: ProductCategoryComponent,
            data: {
              breadcrumbs: true,
            },
          },
        ]
      },
    ]
  },

Using Angular 6.0.3 and RxJs 6.2.0

[blackholegalaxy]

Could you provide some reproduction on stackblitz or provide us with the component where you use the crumbs?

[jackweldon]

@blackholegalaxy sure, here are my two html components in the routes The ts files are just scaffold

ProductsGroupComponent...

<div class="container-fluid page-gutter">
    <div class="row">
        <div class="col-12 col-sm-3">
            <app-breadcrumb></app-breadcrumb>
        </div>
    </div>
    <div class="row">
        <div class="col-12 col-sm-3">
            Filters
            <ul>
                <li>
                    <a [routerLink]="['/products', groupName, 'categoryOne' ]"> categoryOne
          </a>
                </li>
                <li>
                    <a [routerLink]="['/products', groupName, 'categoryTwo' ]">categoryTwo</a>
                </li>
            </ul>
        </div>        
    </div>
</div>

Product Category Component..

<div class="container-fluid page-gutter">
    <div class="row">
        <div class="col-12 col-sm-3">
            <app-breadcrumb></app-breadcrumb>

        </div>
    </div>
    <div class="row"> 
        <div class="col-12 col-sm-9">
            <h1>Product Category : {{categoryName}}</h1>
        </div>
    </div>
</div>

[blackholegalaxy]

As stated in the documentation, when the url part is dynamic (in your example group and category) then the library cannot "guess" the information you want to display.

You then need to implement a custom resolver to retrieve dynamic part data and then display the information you need.

In the documentation, you can find the example stated as follows:

{
        path: ':id',
        component: FolderComponent,
        data: {
          // Resolves the breadcrumbs for this route by
          // implementing a BreadcrumbsResolver class.
          breadcrumbs: FolderBreadcrumbsResolver
        }
      }

You can find more information about resolving dynamic parts here: https://github.com/exalif/angular-libs/tree/master/projects/exalif/ngx-breadcrumbs#breadcrumbsresolver

Hope it helps!

[blackholegalaxy]

I close this issue, Please feel free to reopen if you have any problem.