How to Navigate in Syncfusion DropdownButton Using Angular Router Without Reloading the Entire Page

3 mins read

To configure the router with Syncfusion’s DropDownButton component in an Angular application, follow the steps outlined below. This will ensure that selection of dropdown items will trigger navigation to the respective routes without causing a page reload.

Setting Up Angular Routing

Begin by defining the routes for your application in the app-routing.module.ts file. Each route should correspond to a different component or page that needs to be navigated to.

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AboutComponent } from './about.component';
import { HomeComponent } from './home.component';
import { ProductsComponent } from './products.component';
import { TeamComponent } from './team.component';

const breadCrumbRoutes: Routes = [
  { path: "", component: HomeComponent },
  { path: "home", redirectTo: "" },
  { path: "products", component: ProductsComponent },
  { path: 'products/about', component: AboutComponent },
  { path: 'products/about/team', component: TeamComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(breadCrumbRoutes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

In this setup, routes like /products, /products/about, and /products/about/team are defined, each mapped to a distinct component to render.

Integrating Syncfusion DropDownButton

Next, implement the Syncfusion DropDownButton in your main component. You need to ensure that when an item is selected from the dropdown, the application routes programmatically to the corresponding path.

// app.component.ts
import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { ItemModel } from '@syncfusion/ej2-angular-splitbuttons';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  constructor(private router: Router) {}

  public items: ItemModel[] = [
    { text: 'Home', url: '/' },
    { text: 'Products', url: '/products' },
    { text: 'About', url: '/products/about' }
  ];

  select(args: any) {
    if (args.item && args.item.url) {
      // Prevent the default behavior (which would reload the page)
      args.event.preventDefault();
      // Navigate to the selected route without page refresh
      this.router.navigateByUrl(args.item.url);
    }
  }
}

In this sample, a list of items for the dropdown is defined. Each item must contain a text label and a URL indicating the route. The select() method captures the selection of an item, preventing the default navigation behavior and employing Angular’s router.navigateByUrl() for programmatic routing.

HTML Template for DropDownButton

To add the DropDownButton to your application’s user interface, modify the template file (app.component.html) and bind the select event accordingly.

<!-- app.component.html -->
<div>
  <button ejs-dropdownbutton [items]='items' content="DropDownButton" (select)="select($event)"></button>
</div>
<router-outlet></router-outlet>

Navigate in Syncfusion DropDownButton Using Angular Router Without Reloading the Entire Page

Using the preventDefault Method: By invoking the preventDefault() method inside the select() event handler, you can stop the browser from performing its default action of reloading the page when an item in the dropdown is clicked.
```
args.event.preventDefault(); // Prevent the browser from reloading the page
```
Using the navigateByUrl Method: After preventing the default action, you can call Angular’s Router service to navigate to the new route seamlessly. The navigateByUrl() method allows for navigation without triggering a full page refresh.
```
this.router.navigateByUrl(args.item.url); // Navigate without reloading the page
```

Sample file

Additional References

Sample.zip

Did you find this information helpful?

Yes

Comments (0)