### File

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

### Description

Root application shell component that provides the foundational layout structure for EUI applications. Manages the main application frame including sidebar navigation, toolbar, page content area, and global UI services. Handles responsive behavior, viewport tracking, and theme application across the entire application. Integrates with EuiAppShellService to maintain centralized application state for layout configuration.

Example :

    <!-- Basic app shell -->
    <eui-app>
      <eui-app-sidebar>
        <eui-app-sidebar-menu>
          <!-- Navigation menu items -->
        </eui-app-sidebar-menu>
      </eui-app-sidebar>

      <eui-app-toolbar>
        <!-- Toolbar content -->
      </eui-app-toolbar>

      <router-outlet></router-outlet>
    </eui-app>

    <!-- With custom configuration -->
    <eui-app
      [isSidebarOpen]="sidebarOpen"
      [isShrinkHeaderActive]="true"
      [themeClass]="'dark-theme'"
      appSubTitle="Dashboard">
      <eui-app-sidebar>
        <!-- Sidebar content -->
      </eui-app-sidebar>
      <router-outlet></router-outlet>
    </eui-app>

    <!-- Without sidebar -->
    <eui-app [isSidebarHidden]="true">
      <eui-app-toolbar>
        <!-- Toolbar only layout -->
      </eui-app-toolbar>
      <router-outlet></router-outlet>
    </eui-app>

Example :

    export class AppComponent {
      sidebarOpen = true;

      constructor(private appShellService: EuiAppShellService) {
        // Access global app state
        this.appShellService.state$.subscribe(state => {
          console.log('App state:', state);
        });
      }
    }

### Accessibility

- Provides semantic application structure with proper landmarks
- Sidebar navigation is keyboard accessible
- Focus management handled during sidebar expand/collapse
- Responsive behavior maintains usability across devices
- Theme changes preserve contrast ratios for accessibility
- Growl notifications use ARIA live regions for screen reader announcements

### Notes

- Must be used as root layout component in application
- Integrates with EuiAppShellService for centralized state management
- Automatically tracks viewport dimensions and updates on resize
- Applies 'eui-21' class to HTML element for global styling
- isSidebarOpen controls sidebar expanded/collapsed state (default: true)
- isSidebarHidden completely removes sidebar from layout (default: false)
- isShrinkHeaderActive enables header shrinking on scroll (default: true)
- themeClass applies custom theme styling to entire application
- appSubTitle displays contextual subtitle in header/toolbar
- Manages growl notification overlay positioning and lifecycle
- Handles browser detection for Chrome, IE, Firefox specific behaviors
- Automatically sets CSS custom properties for viewport dimensions
- Content projection expects eui-app-sidebar, eui-app-toolbar, and router-outlet
- Use EuiAppPageWrapperDirective for custom page wrapper layouts
- Responsive breakpoints handled automatically via media queries

### Implements

`OnInit` `OnDestroy` `OnChanges` `AfterContentInit`

### Metadata

encapsulation | `ViewEncapsulation.None`
selector | `eui-app`
imports | `RouterOutlet` `AsyncPipe` `EuiAppSidebarComponent` `EuiAppSidebarMenuComponent` `EuiAppSidebarBodyComponent` `EuiAppToolbarComponent` `EuiToolbarComponent` `EuiToolbarItemsComponent` `EuiToolbarItemComponent` `EUI_USER_PROFILE` `EUI_DIMMER` `EUI_BLOCK_DOCUMENT` `PortalModule`
templateUrl | `./eui-app.component.html`
styleUrl | `./_styles/_index.scss`

### Index

###### Properties
appSidebar appToolbar asService cssClasses customPageWrapper euiGrowlService hasNoPageWrapper isViewLoaded
###### Inputs
appSubTitle isShrinkHeaderActive isSidebarHidden isSidebarOpen themeClass
###### HostBindings
class

### Inputs

appSubTitle
Type : `string`
Default value : `''`
Subtitle text displayed in the application header or toolbar area. Typically used to show contextual information about the current view or section.

isShrinkHeaderActive
Type : `boolean`
Default value : `true`
Enables automatic header shrinking behavior on scroll. When true, the application header reduces its height when user scrolls down, maximizing content area.

isSidebarHidden
Type : `boolean`
Default value : `false`
Completely hides the sidebar from the layout. When true, sidebar is removed from DOM and content area expands to full width. Differs from isSidebarOpen which only collapses the sidebar.

isSidebarOpen
Type : `boolean`
Default value : `true`
Controls the expanded/collapsed state of the application sidebar. When true, sidebar is fully expanded showing labels and content. When false, sidebar collapses to icon-only mode. Syncs with EuiAppShellService state to coordinate sidebar behavior across the application.

themeClass
Type : `string`
Default value : `''`
CSS class name to apply a custom theme to the application shell. Allows theme switching by applying predefined theme class names to the root component.

### HostBindings

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

### Properties

appSidebar
Type : `EuiAppSidebarComponent`
Decorators : `@ContentChild(undefined)`

appToolbar
Type : `EuiAppToolbarComponent`
Decorators : `@ContentChild(undefined)`

asService
Type : `unknown`
Default value : `inject(EuiAppShellService)`

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

customPageWrapper
Type : `EuiAppPageWrapperDirective`
Decorators : `@ContentChild(undefined)`

euiGrowlService
Type : `unknown`
Default value : `inject(EuiGrowlService)`

hasNoPageWrapper
Type : `unknown`
Default value : `false`

isViewLoaded
Type : `boolean`

# results matching ""

# No results matching ""