Dynamically Rendering Components in the TabStrip

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 ngFor structural directive to iterate over the collection of tabs together with the built-in TabContentDirective to render custom content in each tab.

   html

   <kendo-tabstrip-tab *ngFor="let item of items; let i = index" ... >
       <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