### File

`packages/components/layout/eui-header/header-user-profile/header-user-profile.component.ts`

### Description

User profile component designed for header placement, displaying user information with optional dropdown menu. Provides visual representation of the logged-in user with avatar, name, welcome message, and impersonation indicators. Integrates with EuiUserProfileComponent and EuiUserProfileMenuComponent for dropdown menu functionality. Supports customization of avatar display, user information visibility, and welcome message text.

Example :

    <eui-app>
      <eui-app-header>
        <eui-header>
          <eui-header-logo></eui-header-logo>
          <eui-header-app appName="MyWorkplace"></eui-header-app>
          <eui-header-user-profile
            avatarUrl="assets/avatar.jpg"
            welcomeLabel="Welcome"
            [isShowUserInfos]="true">
            <eui-user-profile-menu>
              <eui-user-profile-menu-item (click)="onProfile()">
                My Profile
              </eui-user-profile-menu-item>
              <eui-user-profile-menu-item (click)="onSignOut()">
                Sign Out
              </eui-user-profile-menu-item>
            </eui-user-profile-menu>
          </eui-header-user-profile>
        </eui-header>
      </eui-app-header>
    </eui-app>

### Accessibility

- Avatar provides visual user identification
- Dropdown menu keyboard accessible when hasTabNavigation enabled
- Welcome message readable by screen readers
- Menu items must be keyboard navigable
- Focus management for dropdown interactions
- Impersonation status clearly indicated

### Notes

- Must be used within eui-header for proper layout
- Positioned at the end of the header (rightmost)
- Wraps EuiUserProfileComponent with header-specific styling
- Menu content via eui-user-profile-menu child component
- isShowUserInfos controls text visibility (default: true)
- hasWelcomeLabel controls welcome message (default: true)
- isShowAvatarInitials shows user initials when no avatar (default: false)
- hasTabNavigation enables keyboard focus (default: false)
- avatarUrl for custom avatar image
- subInfos for additional user details (role, department)
- impersonateLabel for impersonation scenarios
- closeUserProfileDropdown() method to programmatically close menu
- Automatically detects menu content via ContentChildren

### Implements

`AfterContentInit`

### Metadata

changeDetection | `ChangeDetectionStrategy.Default`
encapsulation | `ViewEncapsulation.None`
selector | `eui-header-user-profile`
imports | `EUI_USER_PROFILE`
templateUrl | `./header-user-profile.component.html`
styleUrl | `./header-user-profile.component.scss`

### Index

###### Properties

- cssClass
- hasMenuContent
- userProfile

###### Methods

- Public closeUserProfileDropdown

###### Inputs

- avatarUrl
- hasTabNavigation
- hasWelcomeLabel
- impersonateLabel
- isShowAvatarInitials
- isShowUserInfos
- subInfos
- welcomeLabel

###### HostBindings

- class

### Inputs

avatarUrl
Type : `string`
URL path to the user's avatar image. When provided, displays the image instead of initials or default avatar. Optional.

hasTabNavigation
Type : `boolean`
Default value : `false`
Enables keyboard tab navigation to the user profile component. When true, makes the profile element focusable and accessible via keyboard.

hasWelcomeLabel
Type : `boolean`
Default value : `true`
Controls visibility of the welcome label text. When false, hides the welcome message prefix and shows only the username.

impersonateLabel
Type : `string`
Default value : `'acting as'`
Text label displayed when user is impersonating another user. Shows between the actual user and impersonated user names, typically "acting as".

isShowAvatarInitials
Type : `boolean`
Default value : `false`
Displays user initials in the avatar when no avatar image is provided. When true, shows first letters of user's name as avatar placeholder.

isShowUserInfos
Type : `boolean`
Default value : `true`
Controls visibility of user information text (name, email, etc.). When false, hides textual user details and shows only the avatar.

subInfos
Type : `string`
Additional user information text displayed below the main user name. Typically used for role, department, or secondary identification. Optional.

welcomeLabel
Type : `string`
Default value : `'Welcome'`
Text label displayed before the username in the welcome message. Typically used for greeting text like "Welcome" or "Hello".

### HostBindings

class
Type : `string`
Default value : `'eui-header-user-profile'`

### Methods

Public closeUserProfileDropdown
`closeUserProfileDropdown()`
Programmatically closes the user profile dropdown menu if currently open. Must be called after ngAfterViewInit lifecycle hook to ensure userProfile component is initialized. Useful for closing the menu in response to external events or navigation changes. Returns : `void`

### Properties

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

hasMenuContent
Type : `QueryList<EuiUserProfileMenuComponent>`
Decorators : `@ContentChildren(undefined, {descendants: true})`

userProfile
Type : `EuiUserProfileComponent`
Decorators : `@ViewChild('userProfile')`

# results matching ""

# No results matching ""