Why is xng-breadcrumb not showing trail of breadcrumbs?

I have the following in my app.routes:

{ path: 'home', component: HomeComponent, data: { breadcrumb: 'Home' } },
{ path: 'product', component: ProductComponent, data: { breadcrumb: 'Product' } },
{ path: 'cart', component: CartComponent, data: { breadcrumb: 'Cart' } },


My imports in app.component:

imports: [
BreadcrumbComponent,
BreadcrumbItemDirective


],

app.component.html contains: <xng-breadcrumb></xng-breadcrumb>

When I navigate from one page to another, only the breadcrumb of the current page is shown, no other breadcrumb is shown so I cannot navigate using the breadcrumbs.

Doc: xng-breadcrumb doc

Continue reading...