packages/components/eui-user-profile/user-profile.component.ts
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.
<!-- 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" />
OnInit
OnDestroy
AfterViewInit
| 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 |
| 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'
|
| class |
Type : string
|
| closeDropdown |
closeDropdown()
|
|
Returns :
void
|
| onDropdownExpand | ||||||
onDropdownExpand(isOpen: boolean)
|
||||||
|
Parameters :
Returns :
void
|
| onOpenChange | ||||||
onOpenChange(open: boolean)
|
||||||
|
Parameters :
Returns :
void
|
| $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>
|
| cssClasses |
getcssClasses()
|