### File

`packages/components/eui-tabs/eui-tab-header/eui-tab-header.component.ts`

### Description

Custom header content component for individual tabs within eui-tabs. Allows projection of custom content into the tab header area using CDK Portal. Enables rich tab headers with icons, badges, or custom layouts beyond simple text labels. Must be used as a child of eui-tab component to provide custom header content.

### Basic Usage

Example :

    <eui-tab>
      <eui-tab-header>
        <eui-tab-header-label>Settings</eui-tab-header-label>
      </eui-tab-header>
      <eui-tab-body>Content</eui-tab-body>
    </eui-tab>

### With Icons and Badges

Example :

    <eui-tab>
      <eui-tab-header>
        <eui-tab-header-left-content>
          <eui-icon-svg icon="eui-notification" size="s" />
        </eui-tab-header-left-content>
        <eui-tab-header-label>Notifications</eui-tab-header-label>
        <eui-tab-header-sub-label>Unread messages</eui-tab-header-sub-label>
        <eui-tab-header-right-content>
          <eui-badge euiDanger>5</eui-badge>
        </eui-tab-header-right-content>
      </eui-tab-header>
      <eui-tab-body>Content</eui-tab-body>
    </eui-tab>

### Complex Layout

Example :

    <eui-tab>
      <eui-tab-header>
        <eui-tab-header-left-content>
          <eui-avatar [imageUrl]="user.avatar" euiSizeXs />
        </eui-tab-header-left-content>
        <div>
          <eui-tab-header-label>{{ user.name }}</eui-tab-header-label>
          <eui-tab-header-sub-label>{{ user.role }}</eui-tab-header-sub-label>
        </div>
      </eui-tab-header>
      <eui-tab-body>Content</eui-tab-body>
    </eui-tab>

### Accessibility

- Header content contributes to tab's accessible name
- Icons should have appropriate aria-labels
- Badges should convey meaningful information
- Maintain logical reading order for screen readers

### Notes

- Uses CDK Portal for efficient rendering
- Supports structured content via sub-components
- Left/right content areas for flexible layouts
- Label and sub-label for hierarchical text
- Replaces simple label attribute when used

### Implements

`AfterViewInit`

### Metadata

selector | `eui-tab-header`
templateUrl | `./eui-tab-header.component.html`

### Index

###### Properties
Public templatePortal templateRef

### Properties

Public templatePortal
Type : `TemplatePortal`

templateRef
Type : `TemplateRef<HTMLElement>`
Decorators : `@ViewChild('templateRef')`

# results matching ""

# No results matching ""