We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Clicking breadcrumb item without full page reload

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



3 Replies

YA YuvanShankar Arunagiri Syncfusion Team February 24, 2023 06:31 AM UTC

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.

  1. Using the itemClick event and router, we can navigate to another page without a page reload.

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


Attachment: breadcrumbrouting_c5bf27d8.zip


DC Dan Clarke March 3, 2023 10:30 AM UTC

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.



YA YuvanShankar Arunagiri Syncfusion Team March 7, 2023 04:08 AM UTC

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.


Feedback: https://www.syncfusion.com/feedback/41801/provide-the-page-navigation-support-without-page-reload-for-breadcrumb-component


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.


Loader.
Up arrow icon