Tabs
A compound component for organising content into named panels, with lazy, eager, and destructive render strategies.
Import
import {FktTabsListComponent} from "frakton-ng/tabs";Basic usage
Default tabs using lazy rendering. Content is created on first visit and kept in DOM when switching away.
The overview tab is selected by default. Tab content is rendered lazily — other tabs are only created when first visited.
Once visited, this tab's content stays in the DOM. Switching away and back does not re-render it.
Use [(activeTab)] to control or read the selected tab from outside the component.
With icons
Tab headers with icons alongside labels. Pass an icon name via the icon input on each fkt-tab.
Manage your personal information and preferences.
Configure password, two-factor authentication, and active sessions.
Choose which events trigger email or in-app notifications.
Render modes
Comparison of all three render modes. Each section uses fktTabLazy content with a counter component so state destruction and preservation are clearly visible when switching tabs.
Lazy
Increment the counter, switch tabs, come back — count is preserved after first visit.
Eager
All counters are rendered upfront. Count is always preserved regardless of visit order.
Destructive
Increment the counter, switch tabs, come back — count resets because the component is destroyed.