Dynamically Rendering Components in the TabStrip

Updated on Nov 24, 2025

Environment

Product

Progress® Kendo UI for Angular TabStrip

Description

How can I dynamically render a different component in each of the TabStrip tabs? I want to ensure that each tab contains different content in the form of a component, which is rendered upon user interaction.

Solution

To dynamically render components in the TabStrip:

1. Create a wrapper component that contains an ng-template element and use the createComponent() method to create the specific component.

2. Use the @for control flow syntax to iterate over the collection of tabs together with the built-in TabContentDirective to render custom content in each tab.

   html

   @for (item of items; track item; let i = $index) {
     <kendo-tabstrip-tab ...>
       <ng-template kendoTabContent #tabContent>
           ...
       </ng-template>
     </kendo-tabstrip-tab>
   }

3. Render the custom wrapper component within the TabContentDirective and provide the specific component that should be displayed.

   html

   <my-wrapper [component]="item.component"></my-wrapper>

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

Change Theme

Theme

Loading ...

Suggested Links

• TabStrip Overview
• API Reference of the TabStrip Component
• Configuring the TabStrip tabs