Show only the last few breadcrumbs.

🧩 Feature request

To be able to show only the last 4 breadcrumbs. Any preceding breadcrumbs will be displayed as “…” to prevent clutter.

Description

In order to be able to do this, it would be useful to know the index and length of the xngBreadcrumbItem array in HTML.

<xng-breadcrumb> <ng-container *xngBreadcrumbItem="let breadcrumb; let first = first; let last = last; let index = index; let length = length; let count = count;"> <i *ngIf="first" class="fa fa-home"></i> <!--show only 2 dots--> <ng-container *ngIf="!first && index < (count - 4)">..</ng-container> <!--show the last 4 breadcrumbs--> <ng-container *ngIf="!first && index >= (count - 4)">{{ breadcrumb }}</ng-container> </ng-container> </xng-breadcrumb>

Describe the solution you’d like

Just as there is first and last, it would be very useful to have an index and count to be able to perform such functionality in HTML.

Describe alternatives you’ve considered

I considered using the .set. However, at module level the currentBreadcrumb array is still empty and I cannot bind an OnAfterViewInit event to the module. This can be done with an onAfterBreadcrumbsLoaded event.

Another alternative would be a limit parameter to do this more automatically.

[dedrazer]

I am working on it and will upload a PR soon, thanks.

[udayvunnam]

@dedrazer Along with exposing length to xngBreadcrumbItem, it will good if it’s a feature from library.

I will work on this. A PR is welcome with the changes too