In an Angular app, this would presumably be the most common use-case - ie. it using the default angular routing, rather than a full page reload? All the examples seem to cause a page reload. How do I get it to just navigate to pages in my SPA app?
Thanks for the help :)
Dan
Hi Dan,
We have prepared the sample based on your requirement. Please refer to the below code snippet and the attached sample file. There are two ways to achieve your requirement.
clickHandler(args: BreadcrumbClickEventArgs) { if(args.item) { this.router.navigate(args.item.url.split('/')); } } |
2. Using itemTemplate feature, we can add an anchor tag
with a router link for navigating to another page.
<ejs-breadcrumb [(activeItem)]="activeItem"> <e-breadcrumb-items> <e-breadcrumb-item text="Home" url="home"></e-breadcrumb-item> <e-breadcrumb-item text="Products" url="/products"></e-breadcrumb-item> <e-breadcrumb-item text="About" url="/products/about"></e-breadcrumb-item> <e-breadcrumb-item text="Team" url="/products/about/team"></e-breadcrumb-item> </e-breadcrumb-items> <ng-template #itemTemplate let-dataSource> <span> <a class="e-breadcrumb-text" [routerLink]="[dataSource.url]">{{ dataSource.text }}</a> </span> </ng-template> </ejs-breadcrumb> |
Get back to us if you need any further assistance on this.
Regards,
YuvanShankar A
Thank you - that worked.
Shouldn't this be built-in / default functionality for the component in an Angular app though? Angular is typically for SPA apps - so in 99% of cases, a page-reload wouldn't be what was required.
Dan,
We have considered your requirement as improvement for Breadcrumb component. You can track the status of this feature by using the following feedback report link.
We regretfully can't start this feature's implementation immediately since we prioritized bug fixes and features that come before them in the queue for forthcoming releases. The time between releases is typically at least three months. Every release cycle, we assess all open features again during the planning phase and decide which ones to deploy based on a number of criteria, such as the product vision, technology viability, and user interest. The feedback will be moved to scheduled status with an estimated delivery period whenever we have more information to provide regarding the development of these improvements. We appreciate your patience until then.