New to Kendo UI for Angular? Start a free 30-day trial

Routing

You can utilize the Angular Router and use the Drawer as a navigational component.

The Router enables you to load modules which act as root modules for specific paths. The Angular Router loads separate modules for separate components and bootstraps the components. This approach is useful when the paths do not share any main components—for example, public vs. admin sections. To use shared components, move the components into a shared module and import it in the separate module.

To set the functionality, use either of the following approaches:

Use the select event to navigate to the route which is represented by the Drawer.
Use a template to add the routerLink directive to the item link. To expand the link element so it fits the whole Drawer item, you can apply the k-drawer-link CSS class to it.

Using RouterLink Directive

This approach enables you to navigate to the routes upon clicking the Drawer items and by using the RouterLink directive. The directive is generated from the routes that are available in the router configuration. To use the routerLink directive, you need to import the RouterModule in your module.

html

<ng-template kendoDrawerItemTemplate let-item>
    <div class="k-drawer-link" [routerLink]="'./' + item.path">
        <span>{{ item.text }}</span>
    </div>
</ng-template>

The following example demonstrates how to use the kendoDrawerItemTemplate directive to generate the routerLink directive for each item in the Drawer.

Change Theme

Theme

Loading ...

Using Router Service

To get the selected item, you can use the select event of the Drawer. The event returns the selected item, which you can then use to navigate to the corresponding route. You can use the Router service to navigate to the selected route.

constructor(private router: Router, private route: ActivatedRoute) {}
public onSelect(drawerItem: DrawerSelectEvent): void {
    this.router.navigate([`./${drawerItem.item.path}`], { relativeTo: this.route });
}

The following example demonstrates how to convert the routes to an array of DrawerItems and navigate to the selected item route in the select event.