File

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

Description

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

<!-- Application name 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 application identification context
• HTML formatting preserved for visual emphasis
• Text content extracted for global state access

Notes

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

Implements

OnInit

<ng-content />