Drawer - Set active route in DrawerItem

[Kristof]

Hi,

Our purpose is to have a fixed menu at the left side of our website. The menu must be collapsablel (minimizable) to see only icons. I think the Drawer control can be the right control.

I want to use routes to navigate to a page in the drawer-content space.

If I navigate to a route in the angular page, I want that a specific draweritem is selected.

How can I achieve this?

Can I use the routerLinkActive on a drawer item? 

Is the drawer the most suitable control?

 

Thanks for your help

[Dimiter Madjarov]

Hi Kristof,

Yes, the Drawer is the recommended control for a left/right side collapsible navigation. The following documentation page demonstrates two approaches on how to integrate it with the Angular Router:

https://www.telerik.com/kendo-angular-ui/components/layout/drawer/routing/

I hope this information helps.

Regards,
Dimiter Madjarov
Progress Telerik

[Geoff]

Sorry, no this does not completely help. These examples don't work to highlight the current route when the route is deep linked or redirected.

[Martin Bechev]

Hi Geoff,

The developer can highlight a specific Drawer item, by manually setting the selected option of the corresponding DrawerItem to true.

To reflect the changes, the Angular change detection needs to be triggered. This can be done by changing the reference of the DrawerItem array:

this.items = [...this.items]

or

this.items = JSON.parse(JSON.stringify(this.items))

Let me know how it goes and if you are still experiencing issues, please send us some more details about the configuration or ideally a runnable demo. Thank you.