Rendering Modes in Angular TabStrip
The Kendo UI for Angular TabStrip provides two rendering modes for managing tab content, which you can control with the keepTabContent property. These modes let you either load the tab's content every time the user switches between the tabs or keep it loaded.
Load Tab Content On Demand
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 Load on Demand behavior where keepTabContent is false. Select a row from the Grid and navigate between the tabs. Note that the selection will not persist because the Grid component is destroyed and re-rendered in the DOM during this process.
Persist All Tab Content
When the keepTabContent property is set to true, all tabs are rendered and persist in the DOM, regardless of whether they are currently active. This mode is ideal for scenarios where maintaining the state of tab content is necessary or when re-rendering tab content is computationally expensive.
The next example demonstrates the Persist All Tab Content behavior where keepTabContent is true. Note that the selection persists because the Grid component is not destroyed and re-rendered in the DOM during this process.