### File

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

### Description

Application name and subtitle component for header placement, displaying the application title and descriptive text. Provides centralized management of application identity with synchronization to EuiAppShellService for global access. Supports full application name, shortened name for responsive layouts, and optional subtitle for context. Allows custom content projection via child components (EuiHeaderAppNameComponent, EuiHeaderAppSubtitleComponent, EuiHeaderAppNameLogoComponent). Automatically updates application shell state when input values change, enabling reactive UI updates across the application.

Example :

    <!-- Using input properties -->
    <eui-app>
      <eui-app-header>
        <eui-header>
          <eui-header-app
            appName="MyWorkplace"
            appShortName="MWP"
            appSubTitle="Dashboard">
          </eui-header-app>
        </eui-header>
      </eui-app-header>
    </eui-app>

    <!-- Using content projection -->
    <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

- Application name provides primary identification context
- Subtitle offers additional contextual information
- Text content is readable by screen readers
- Content projection allows semantic HTML structure

### Notes

- Must be used within eui-header for proper layout
- Two usage modes: input properties or content projection
- appName is the full application name (required)
- appShortName displays in responsive/compact layouts (defaults to appName)
- appSubTitle provides contextual information below name
- Content projection via eui-header-app-name and eui-header-app-subtitle
- Automatically syncs with EuiAppShellService state
- State changes propagate to all subscribed components
- Positioned in header between logo/environment and user profile
- Responsive behavior switches between full and short names

### Implements

`OnInit` `OnChanges` `OnDestroy`

### Metadata

changeDetection | `ChangeDetectionStrategy.Default`
encapsulation | `ViewEncapsulation.None`
selector | `eui-header-app`
templateUrl | `./header-app.component.html`
styleUrl | `./header-app.component.scss`

### Index

###### Properties
cssClass customAppName customAppNameLogo customAppSubtitle
###### Inputs
appName appShortName appSubTitle
###### HostBindings
class

### Inputs

appName
Type : `string`
Default value : `''`
Full application name displayed in the header. Used as the primary application identifier and fallback for appShortName when not provided. Synchronized with EuiAppShellService state for global access.

appShortName
Type : `string`
Default value : `''`
Shortened version of the application name for responsive or compact layouts. When empty, automatically falls back to appName value. Useful for displaying abbreviated names in mobile or collapsed header states.

appSubTitle
Type : `string`
Default value : `''`
Subtitle or descriptive text displayed below the application name. Provides additional context about the application, current section, or user role. Synchronized with EuiAppShellService state for global access.

### HostBindings

class
Type : `string`
Default value : `'eui-header-app'`

### Properties

cssClass
Type : `string`
Default value : `'eui-header-app'`
Decorators : `@HostBinding('class')`

customAppName
Type : `EuiHeaderAppNameComponent`
Decorators : `@ContentChild(undefined)`

customAppNameLogo
Type : `EuiHeaderAppNameLogoComponent`
Decorators : `@ContentChild(undefined)`

customAppSubtitle
Type : `EuiHeaderAppSubtitleComponent`
Decorators : `@ContentChild(undefined)`

# results matching ""

# No results matching ""