### File

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

### Description

User profile component that displays user information with avatar, name, and optional dropdown menu. Integrates with UserService to display current user state and supports impersonation indicators. Provides customizable layouts for header, toolbar, or standalone usage. Supports avatar display with initials, status indicators, and optional menu with navigation items.

### Basic Usage

Example :

    <!-- Simple user profile -->
    <eui-user-profile
      [hasMenu]="true"
      [isShowAvatarInitials]="true">
      <eui-user-profile-menu>
        <eui-user-profile-menu-item (click)="viewProfile()">
          Profile
        </eui-user-profile-menu-item>
        <eui-user-profile-menu-item (click)="logout()">
          Logout
        </eui-user-profile-menu-item>
      </eui-user-profile-menu>
    </eui-user-profile>

    <!-- Header user profile -->
    <eui-user-profile
      [isHeaderUserProfile]="true"
      [avatarUrl]="user.avatarUrl"
      [subInfos]="user.email" />

### Accessibility

- Avatar has appropriate alt text with user name
- Dropdown menu is keyboard accessible
- Status indicators have aria-label describing state
- Focus management for menu navigation

### Notes

- Automatically fetches user data from UserService
- Supports impersonation mode with visual indicator
- Avatar initials generated from user name when no image provided
- Status variants: success, secondary, danger
- Reverse layout option for right-to-left designs

### Implements

`OnInit` `OnDestroy` `AfterViewInit`

### Metadata

encapsulation | `ViewEncapsulation.None`
HostDirectives | `BaseStatesDirective` Inputs : euiSizeS euiSecondary euiPrimary
providers | `EuiDropdownService`
selector | `eui-user-profile`
imports | `NgTemplateOutlet` `EUI_DROPDOWN` `EUI_ICON` `EUI_AVATAR` `EUI_BADGE`
styleUrls | `./_styles/_index.scss`
templateUrl | `./user-profile.component.html`

### Index

###### Properties

- $isDropdownOpen
- avatarInitials
- baseStatesDirective
- dropdown
- hasMenuContent
- isDropdownOpen
- userState

###### Methods

- closeDropdown
- onDropdownExpand
- onOpenChange

###### Inputs

- avatarUrl
- dropContentWidth
- euiStatusDanger
- euiStatusSecondary
- euiStatusSuccess
- hasMenu
- hasTabNavigation
- hasToggle
- hasWelcomeLabel
- impersonateLabel
- isHeaderUserProfile
- isMobileOnly
- isReverse
- isShowAvatarInitials
- isShowUserInfos
- isToolbarUserProfile
- reverseNameOrder
- statusVariant
- subInfos
- welcomeLabel

###### HostBindings

- class

###### Accessors

- cssClasses

### Inputs

avatarUrl
Type : `string`

dropContentWidth
Type : `string`
Default value : `'300px'`

euiStatusDanger
Type : `boolean`
Default value : `false`

euiStatusSecondary
Type : `boolean`
Default value : `false`

euiStatusSuccess
Type : `boolean`
Default value : `false`

hasMenu
Type : `boolean`
Default value : `false`

hasTabNavigation
Type : `boolean`
Default value : `false`

hasToggle
Type : `boolean`
Default value : `false`

hasWelcomeLabel
Type : `boolean`
Default value : `true`

impersonateLabel
Type : `string`
Default value : `'acting as'`

isHeaderUserProfile
Type : `boolean`
Default value : `false`

isMobileOnly
Type : `boolean`
Default value : `true`

isReverse
Type : `boolean`
Default value : `false`

isShowAvatarInitials
Type : `boolean`
Default value : `false`

isShowUserInfos
Type : `boolean`
Default value : `true`

isToolbarUserProfile
Type : `boolean`
Default value : `false`

reverseNameOrder
Type : `boolean`
Default value : `false`
If true, the name will be displayed in reverse order (first name, first)

statusVariant
Type : `string`
Default value : `'success'`

subInfos
Type : `string`

welcomeLabel
Type : `string`
Default value : `'Welcome'`

### HostBindings

class
Type : `string`

### Methods

closeDropdown
`closeDropdown()`
Returns : `void`

onDropdownExpand
`onDropdownExpand(isOpen: boolean)`

Parameters :

Name | Type | Optional
isOpen | `boolean` | No

Returns : `void`

onOpenChange
`onOpenChange(open: boolean)`

Parameters :

Name | Type | Optional
open | `boolean` | No

Returns : `void`

### Properties

$isDropdownOpen
Type : `unknown`
Default value : `new BehaviorSubject<boolean>(false)`

avatarInitials
Type : `Signal<string>`

baseStatesDirective
Type : `unknown`
Default value : `inject(BaseStatesDirective)`

dropdown
Type : `EuiDropdownComponent`
Decorators : `@ViewChild('dropdown')`

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

isDropdownOpen
Type : `unknown`
Default value : `false`

userState
Type : `Signal<UserProfile>`

### Accessors

cssClasses
get `cssClasses()`

# results matching ""

# No results matching ""