A TabList container.
API
class TabList implements OnInit ,OnDestroy { readonly element: HTMLElement; readonly textDirection: WritableSignal<Direction>; readonly @Input() orientation: InputSignal<"vertical" | "horizontal">; readonly @Input() wrap: InputSignalWithTransform<boolean, unknown>; readonly @Input() softDisabled: InputSignalWithTransform<boolean, unknown>; readonly @Input() focusMode: InputSignal<"roving" | "activedescendant">; readonly @Input() selectionMode: InputSignal<"follow" | "explicit">; readonly @Input() @Output('selectedTabChange') selectedTab: ModelSignal<string | undefined>; readonly @Input() disabled: InputSignalWithTransform<boolean, unknown>; open(value: string): boolean;}
element
HTMLElementA reference to the host element.
textDirection
WritableSignal<Direction>Text direction.
orientation
InputSignal<"vertical" | "horizontal">Whether the tablist is vertically or horizontally oriented.
wrap
InputSignalWithTransform<boolean, unknown>Whether focus should wrap when navigating.
softDisabled
InputSignalWithTransform<boolean, unknown>Whether to allow disabled items to receive focus. When true, disabled items are
focusable but not interactive. When false, disabled items are skipped during navigation.
focusMode
InputSignal<"roving" | "activedescendant">The focus strategy used by the tablist.
roving: Focus is moved to the active tab usingtabindex.activedescendant: Focus remains on the tablist container, andaria-activedescendantis used to indicate the active tab.
selectionMode
InputSignal<"follow" | "explicit">The selection strategy used by the tablist.
follow: The focused tab is automatically selected.explicit: Tabs are selected explicitly by the user (e.g., via click or spacebar).
selectedTab
ModelSignal<string | undefined>The current selected tab.
disabled
InputSignalWithTransform<boolean, unknown>Whether the tablist is disabled.
ngOnInit
void@returns
voidngOnDestroy
void@returns
voidopen
booleanOpens the tab panel with the specified value.
@paramvalue
string@returns
booleanDescription
A TabList container.
The ngTabList directive controls a list of ngTab elements. It manages keyboard
navigation, selection, and the overall orientation of the tabs. It should be placed
within an ngTabs container.
<ul ngTabList [(selectedTab)]="mySelectedTab" orientation="horizontal" selectionMode="explicit"> <li ngTab value="first">First Tab</li> <li ngTab value="second">Second Tab</li></ul>Jump to details