NgDocTabGroupComponent

Tabs as a segmented control over one panel. It follows the WAI-ARIA tabs pattern: the arrow keys, Home and End move between the tabs and select them. The highlight of the open tab slides to the newly opened one.

Decorators: @Component
Selectors: ng-doc-tab-group
Generic types: T

DeclarationTypeScript

@Component({ … })
export class NgDocTabGroupComponent<T = number> { … }

Members

Properties

idPrefix: string

protectedreadonly

Prefix of the ids that tie the tabs to the panel.

openedTab: InputSignal<T | undefined>

readonly input()

Id of the tab to open; the first tab opens when it is not set or matches no tab.

selectedIndex: Signal<number>

readonly

Index of the open tab, or -1.

selectedTab: WritableSignal<NgDocTabComponent<T> | undefined>

readonly

The open tab. It follows openedTab and the tab list; a tab the user selects stays open as long as it is in the group and openedTab does not change.

tabElements: Signal<readonly ElementRef<HTMLElement>[]>

readonly

Header buttons of the tabs, in order.

tabs: Signal<readonly NgDocTabComponent<T>[]>

readonly

The tabs of the group.

Methods

(…): void

protected

Moves the selection with the keyboard and focuses the new tab.

Signature

protected onKeydown(event: KeyboardEvent): void;

Parameters

Name	Type	Description
event	`KeyboardEvent`	The key press on a tab.

Returns

void

(…): void

Opens a tab.

Signature

selectTab(tab: NgDocTabComponent<T>): void;

Parameters

Name	Type	Description
tab	`NgDocTabComponent<T>`	The tab to open.

Returns

void