@angular/aria/tabs

TabPanel

directive

A TabPanel container for the resources of layered content associated with a tab.

API

    
      class TabPanel implements OnInit ,OnDestroy {  readonly element: HTMLElement;  readonly @Input() id: InputSignal<any>;  readonly @Input() value: InputSignal<string>;  readonly visible: Signal<boolean>;}

element

HTMLElement

A reference to the host element.

id

InputSignal<any>

A global unique identifier for the tab.

value

InputSignal<string>

A local unique identifier for the tabpanel.

visible

Signal<boolean>

Whether the tab panel is visible.

ngOnInit

void

@returnsvoid

ngOnDestroy

void

@returnsvoid

Description

A TabPanel container for the resources of layered content associated with a tab.

The ngTabPanel directive holds the content for a specific tab. It is linked to an ngTab by a matching value. If a tab panel is hidden, the inert attribute will be applied to remove it from the accessibility tree. Proper styling is required for visual hiding.

<div ngTabPanel value="myTabId">  <ng-template ngTabContent>    <!-- Content for the tab panel -->  </ng-template></div>