File

packages/components/layout/eui-header/header-app/header-app-subtitle.component.ts

Description

Custom subtitle component for use within eui-header-app, allowing HTML content projection for application subtitle. Automatically extracts projected content and synchronizes it with EuiAppShellService state for global access. Provides an alternative to the appSubTitle input property when rich HTML formatting or custom elements are needed. Content is projected via ng-content allowing flexible subtitle composition with links, icons, or formatted text.

<!-- Application subtitle in header -->
<eui-app>
  <eui-app-header>
    <eui-header>
      <eui-header-app>
        <eui-header-app-name><strong>My</strong>Workplace</eui-header-app-name>
        <eui-header-app-subtitle>Dashboard</eui-header-app-subtitle>
      </eui-header-app>
    </eui-header>
  </eui-app-header>
</eui-app>

Accessibility

• Text content is readable by screen readers
• Provides contextual information about current view
• HTML formatting preserved for visual emphasis
• Content extracted for global state access

Notes

• Must be used within eui-header-app for proper layout
• Automatically syncs HTML content with EuiAppShellService
• Alternative to appSubTitle input property on eui-header-app
• Allows rich HTML formatting (links, icons, emphasis)
• Content is projected via ng-content for flexibility
• HTML content extracted and stored in application state
• Typically paired with eui-header-app-name
• Displays below application name in header

Implements

OnInit

<ng-content />