TabStrip Routing Support

Environment

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.

   Copy Codekendo-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.

   Copy Code    <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.

   Copy Codeconstructor(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.

Suggested Links

• TabStrip Overview
• API Reference of the TabStrip