File

packages/components/layout/eui-header/header-environment/header-environment.component.ts

Description

Environment indicator component for header placement, displaying the current application environment (dev, test, production, etc.). Provides visual distinction between different deployment environments to prevent user confusion and accidental actions. Automatically registers with EuiAppShellService to share environment information across the application. Content is projected via ng-content allowing custom environment labels and styling. Typically displays text like "Development", "Testing", "Staging" with distinct background colors.

<eui-app>
  <eui-app-header>
    <eui-header>
      <eui-header-logo></eui-header-logo>
      <eui-header-environment>DEV</eui-header-environment>
      <eui-header-app appName="MyWorkplace"></eui-header-app>
    </eui-header>
  </eui-app-header>
</eui-app>

Accessibility

• Environment text is readable by screen readers
• Provides critical context about deployment environment
• Visual distinction helps prevent accidental actions in production
• Text content should be concise and clear

Notes

• Must be used within eui-header for proper layout
• Positioned between logo and application name
• Content projected via ng-content (text or HTML)
• Automatically syncs with EuiAppShellService state
• Environment value extracted from innerHTML on init
• Common values: "DEV", "TEST", "ACC", "PROD"
• Styling typically uses distinct background colors per environment
• Component registers/unregisters with app shell on init/destroy

Implements

OnInit OnDestroy

<ng-content />