TabStrip Routing Support

Environment

Product

Progress® Kendo UI® for Angular TabStrip

Description

How can I implement routing for Kendo UI for Angular TabStrip tabs?

Solution

To navigate the user to certain routes upon clicking the TabStrip tabs, use the RouterLink directive. The directive is generated from the routes that are available in the router configuration.

To navigate the user to а different route when clicking a tab:

1. Hide the default TabStrip content with custom CSS. This is required as the content of the routes must be displayed outside the TabStrip.

   css

   kendo-tabstrip.k-tabstrip .k-content.k-active {
      display: none;
   }
   
   .k-tabstrip .k-content.k-active {
       border-top: none;
   }
   

2. Define the router-outlet tags outside the TabStrip component. The div containers and the applied utility classes that come along with the Kendo theme, simulate the default TabStrip content and its structure.

   html

       <kendo-tabstrip>...</kendo-tabstrip>
   
       <div class="k-tabstrip">
           <div class="k-content k-active">
               <router-outlet></router-outlet>
           </div>
       </div>

3. Handle the tabSelect event of the TabStrip and navigate to the necessary component using the navigate method of the Router.

   ts

   constructor(public router: Router) {}
   
   public onTabSelect(e) {
       let path = e.title.toLowerCase();
       this.router.navigate(['/' + path]);
   }

The following example demonstrates the full implementation of the suggested approach.

Change Theme

Theme

Loading ...

Suggested Links

• TabStrip Overview
• API Reference of the TabStrip