This is documentation for the release candidate Stream Chat Angular SDK v6. For the latest stable version, see the latest version (v5).

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

projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:32


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

projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:36


location

location: undefined | AvatarLocation

The location the avatar will be displayed in

Defined in

projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:40


channel

Optional channel: Channel

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

Defined in

projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:44


user

Optional user: UserResponse

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

Defined in

projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:48


type

type: undefined | AvatarType

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

Defined in

projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:52


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

projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:56


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

projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:60

© Getstream.io, Inc. All Rights Reserved.