• Overview
@angular/aria/tabs

A TabList container.

API

    
      class TabList implements OnInit ,OnDestroy {}

element

HTMLElement

A 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 using tabindex.
  • activedescendant: Focus remains on the tablist container, and aria-activedescendant is 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
@returnsvoid

ngOnDestroy

void
@returnsvoid

open

boolean

Opens the tab panel with the specified value.

@paramvaluestring
@returnsboolean

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>
Jump to details