AvatarComponent
The Avatar
component displays the provided image, with fallback to the first letter of the optional name input.
#
Basic UsageA 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";
}
#
CustomizationYou can provide your own avatar component by the CustomTemplatesService
#
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 inlib/avatar/avatar.component.ts:30
#
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 inlib/avatar/avatar.component.ts:34
#
size• size: number
= 32
The size in pixels of the avatar image.
#
Defined inlib/avatar/avatar.component.ts:38
#
location• location: undefined
| AvatarLocation
The location the avatar will be displayed in
#
Defined inlib/avatar/avatar.component.ts:42
#
channel• Optional
channel: Channel
<DefaultStreamChatGenerics
>
The channel the avatar belongs to (if avatar of a channel is displayed)
#
Defined inlib/avatar/avatar.component.ts:46
#
user• Optional
user: User
<DefaultStreamChatGenerics
>
The user the avatar belongs to (if avatar of a user is displayed)
#
Defined inlib/avatar/avatar.component.ts:50
#
type• type: undefined
| AvatarType
The type of the avatar: channel if channel avatar is displayed, user if user avatar is displayed
#
Defined inlib/avatar/avatar.component.ts:54
#
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 inlib/avatar/avatar.component.ts:58
#
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