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
void
ngOnDestroy
void
@returns
void
open
booleanOpens the tab panel with the specified value.
@paramvalue
string
@returns
boolean
Description
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>