# 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:

```typescript
@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`](https://getstream.io/chat/docs/sdk/angular/v5/services/CustomTemplatesService/#avatartemplate)

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:

```html
<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>
```

[//]: # "Start of generated content"

## 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:36](https://github.com/GetStream/stream-chat-angular/blob/d65326c9379c93c53babc4e0ffe54519dd0712a9/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L36)

---

### 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:40](https://github.com/GetStream/stream-chat-angular/blob/d65326c9379c93c53babc4e0ffe54519dd0712a9/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L40)

---

### location

**location**: `undefined` \| `AvatarLocation`

The location the avatar will be displayed in

#### Defined in

[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:44](https://github.com/GetStream/stream-chat-angular/blob/d65326c9379c93c53babc4e0ffe54519dd0712a9/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L44)

---

### channel

`Optional` **channel**: `Channel<DefaultStreamChatGenerics>`

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:48](https://github.com/GetStream/stream-chat-angular/blob/d65326c9379c93c53babc4e0ffe54519dd0712a9/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L48)

---

### user

`Optional` **user**: `User<DefaultStreamChatGenerics>`

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:52](https://github.com/GetStream/stream-chat-angular/blob/d65326c9379c93c53babc4e0ffe54519dd0712a9/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L52)

---

### 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:56](https://github.com/GetStream/stream-chat-angular/blob/d65326c9379c93c53babc4e0ffe54519dd0712a9/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L56)

---

### 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:60](https://github.com/GetStream/stream-chat-angular/blob/d65326c9379c93c53babc4e0ffe54519dd0712a9/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L60)

---

### 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:64](https://github.com/GetStream/stream-chat-angular/blob/d65326c9379c93c53babc4e0ffe54519dd0712a9/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L64)

[//]: # "End of generated content"


---

This page was last updated at 2026-08-07T20:37:38.960Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/angular/v5/components/AvatarComponent/](https://getstream.io/chat/docs/sdk/angular/v5/components/AvatarComponent/).