Rendering Modes in Angular TabStrip
The Kendo UI for Angular TabStrip provides three rendering modes for managing tab content, which you can control with the keepTabContent property. These modes let you optimize performance and manage state based on your application needs.
Render Active Tab Content Only
By default, the TabStrip renders only the content of the active tab. When you switch tabs, the content of the previously active tab is removed from the DOM, and the content of the newly selected tab is rendered dynamically. This behavior is ideal for scenarios where you want to optimize performance by rendering only the necessary content.
The next example demonstrates the default behavior where keepTabContent is false. Switch between tabs and observe the initialization timestamp. Each time you revisit a tab, the timestamp updates and any dropdown selection is lost because the tab content is destroyed and re-rendered in the DOM during this process.
Lazy Load and Persist Tab Content
When the keepTabContent property is set to 'loadOnDemand', the active tab's content is rendered initially. When you activate an inactive tab for the first time, its content is rendered and kept in the DOM. This mode balances performance and state management—inactive tabs are loaded only when needed, but their state is preserved once loaded.
The next example demonstrates the lazy load behavior where keepTabContent is set to 'loadOnDemand'. Switch between tabs and observe the initialization timestamp. Once you visit a tab, the timestamp remains unchanged and any dropdown selection persists on subsequent visits because the tab content is kept in the DOM after its first render.
Persist All Tab Content
When the keepTabContent property is set to true, the TabStrip renders all tab content upfront and keeps it in the DOM, regardless of the active state. This mode is suitable for scenarios where you need to preserve the content state of all tabs and performance is not a primary concern.
The next example demonstrates the TabStrip behavior when the keepTabContent is set to true. All preselected dropdown values are displayed at the top, even for tabs you have not visited, confirming that all tab content is rendered upfront, kept in the DOM, and any selections persist as you navigate between tabs.