packages/components/eui-user-profile/user-profile-card/user-profile-card.component.ts
User profile card component that displays detailed user information including avatar, name, function, and organization. Designed for use within dropdown menus or profile panels. Automatically fetches user data from UserService and supports impersonation display.
<!-- Simple profile card -->
<eui-user-profile-card
[isShowAvatarInitials]="true"
(showProfileInfo)="onShowProfile()"
(closeProfileMenu)="onClose()" />
<!-- With custom avatar -->
<eui-user-profile-card
[avatarUrl]="user.avatarUrl"
[reverseNameOrder]="true"
showDetailsLabel="View Details" />onShowProfile(): void {
this.router.navigate(['/profile']);
}
| changeDetection | ChangeDetectionStrategy.Default |
| encapsulation | ViewEncapsulation.None |
| selector | eui-user-profile-card |
| imports |
TranslateModule
EUI_AVATAR
EUI_ICON_BUTTON
|
| templateUrl | ./user-profile-card.component.html |
Properties |
Methods |
Inputs |
Outputs |
HostBindings |
Accessors |
| avatarUrl |
Type : string
|
| impersonateLabel |
Type : string
|
Default value : 'acting as'
|
| isShowAvatar |
Type : boolean
|
Default value : true
|
| isShowAvatarInitials |
Type : boolean
|
Default value : true
|
| isShowClose |
Type : boolean
|
Default value : true
|
| isShowUserInfos |
Type : boolean
|
Default value : true
|
| profileCardHideLabel |
Type : string
|
Default value : null
|
|
Custom label text for profile close button. When null, uses default translation key. Optional. |
| reverseNameOrder |
Type : boolean
|
Default value : false
|
|
If true, the name will be displayed in reverse order (first name, first) |
| showDetailsLabel |
Type : string
|
Default value : 'Show profile details'
|
| closeProfileMenu |
Type : EventEmitter<void>
|
| showProfileInfo |
Type : EventEmitter<void>
|
| class |
Type : string
|
| onClose |
onClose()
|
|
Closes the parent user-profile overlay/dropdown programmatically.
Returns :
void
|
| onShowInfoClick |
onShowInfoClick()
|
|
Returns :
void
|
| avatarInitials |
Type : Signal<string>
|
| fullName |
Type : Signal<literal type>
|
|
Holds the full name of the user and the impersonated user |
| isOnline |
| This property is not used anymore |
Type : unknown
|
Default value : true
|
|
If true, the user is online |
| userState |
Type : Signal<UserProfile>
|
Default value : inject(UserService).getSignal()
|
| cssClasses |
getcssClasses()
|