Skip to main content
Version: v5 (beta)

AvatarComponent

The Avatar component displays the provided image, with fallback to the first letter of the optional name input.

Basic Usage

A typical use case for the Avatar component would be to use in your custom components that will completely override a message component, or similar.

Example 1 - a basic example:

@Component({
selector: "app-custom-message",
template: `
<stream-avatar [imageUrl]="imageUrl" [name]="name"></stream-avatar>
<!-- Other parts of the custom message component -->
`,
})
export class CustomMessageComponent {
imageUrl =
"https://pbs.twimg.com/profile_images/897621870069112832/dFGq6aiE_400x400.jpg";
name = "Roy";
}

Customization

You can provide your own avatar component using the CustomTemplatesService

This will override the avatar for all locations (for example: message sender, channel preview). In case you want to override it only for selected locations, you can create a custom template like this:

<ng-template
#avatarTemplate
let-name="name"
let-imageUrl="imageUrl"
let-size="size"
let-type="type"
let-location="location"
let-user="user"
let-channel="channel"
let-initialsType="initialsType"
let-showOnlineIndicator="showOnlineIndicator"
>
<my-custom-avatar
*ngIf="location === 'message-sender'; else defaultAvatar"
></my-custom-avatar>
<ng-template #defaultAvatar>
<stream-avatar
[name]="name"
[imageUrl]="imageUrl"
[size]="size"
[type]="type"
[location]="location"
[user]="user"
[channel]="channel"
[initialsType]="initialsType"
[showOnlineIndicator]="showOnlineIndicator"
></stream-avatar>
</ng-template>
</ng-template>

Inputs and outputs

name

name: undefined | string

An optional name of the image, used for fallback image or image title (if imageUrl is provided)

Defined in

lib/avatar/avatar.component.ts:35


imageUrl

imageUrl: undefined | string

The URL of the image to be displayed. If the image can't be displayed the first letter of the name input is displayed.

Defined in

lib/avatar/avatar.component.ts:39


size

size: number = 32

The size in pixels of the avatar image.

Defined in

lib/avatar/avatar.component.ts:43


location

location: undefined | AvatarLocation

The location the avatar will be displayed in

Defined in

lib/avatar/avatar.component.ts:47


channel

Optional channel: Channel<DefaultStreamChatGenerics>

The channel the avatar belongs to (if avatar of a channel is displayed)

Defined in

lib/avatar/avatar.component.ts:51


user

Optional user: User<DefaultStreamChatGenerics>

The user the avatar belongs to (if avatar of a user is displayed)

Defined in

lib/avatar/avatar.component.ts:55


type

type: undefined | AvatarType

The type of the avatar: channel if channel avatar is displayed, user if user avatar is displayed

Defined in

lib/avatar/avatar.component.ts:59


showOnlineIndicator

showOnlineIndicator: boolean = true

If a channel avatar is displayed, and if the channel has exactly two members a green dot is displayed if the other member is online. Set this flag to false to turn off this behavior.

Defined in

lib/avatar/avatar.component.ts:63


initialsType

initialsType: "first-letter-of-first-word" | "first-letter-of-each-word" = 'first-letter-of-first-word'

If channel/user image isn't provided the initials of the name of the channel/user is shown instead, you can choose how the initals should be computed

Defined in

lib/avatar/avatar.component.ts:67

Did you find this page helpful?