Routing

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

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

The navigation approaches that the PanelBar supports are:

This approach enables you to navigate to the routes upon clicking the PanelBar items and by using the RouterLink directive. The directive is generated from the routes that are available in the router configuration.

Example
View Source
Edit In Stackblitz  
Change Theme:

Getting the Selected Item

When you use the stateChange event of the PanelBar, the event handler gets the selected item (route) and passes it to the navigate method of the Router.

In this article

Not finding the help you need?