Import
import { AvatarModule } from '@backbase/ui-ang/avatar'
Usage
Use the bb-avatar-ui component to display an avatar. The name input is recommended for generating initials if no image is provided.
<!-- Basic avatar usage with name -->
<bb-avatar-ui [name]="'Jane Doe'"></bb-avatar-ui>
Inputs
|
Input |
Type |
Default |
|---|---|---|
|
image |
string |
'' |
|
imgAlt |
string |
'' |
|
initials |
string |
'' |
|
name |
string |
'' |
|
size |
’sm' | ’md' | ’lg' | ’xl' | string |
'' |
Global configuration token
The behavior of all avatar components in your application can be globally configured using the AVATAR_CONFIG_TOKEN. This allows to set a custom function for generating initials, for example.
import { AVATAR_CONFIG_TOKEN } from '@backbase/ui-ang/avatar';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
const avatarConfig = {
initialsFn: (text: string) => `${text[0]}${text[1]}`
};
platformBrowserDynamic().bootstrapModule(AppModule, {
providers: [{ provide: AVATAR_CONFIG_TOKEN, useValue: avatarConfig }]
});
image
The image input sets the URL of the image to display. If not provided or empty, the avatar will display initials or a placeholder.
<!-- Avatar with image URL -->
<bb-avatar-ui [image]="'https://example.com/avatar.jpg'"></bb-avatar-ui>
imgAlt
The imgAlt input sets the alt text for the avatar image, improving accessibility and providing context if the image fails to load.
<!-- Avatar with custom alt text -->
<bb-avatar-ui [imgAlt]="'Jane Doe avatar'"></bb-avatar-ui>
initials
The initials input sets the initials to display if no image is provided. If not set, initials are derived from the name input. Supports up to two characters.
<!-- Avatar with custom initials -->
<bb-avatar-ui [initials]="'JD'"></bb-avatar-ui>
name
The name input sets the name from which initials are derived if no image or custom initials are provided.
<!-- Avatar with name for initials -->
<bb-avatar-ui [name]="'Jane Doe'"></bb-avatar-ui>
size
The size input sets the size of the avatar. Possible values are ’sm', ’md', 'lg', ’xl'.
<!-- Avatar with large size -->
<bb-avatar-ui [size]="'lg'"></bb-avatar-ui>