# ChannelPreviewComponent

> **Info:** This is release candidate documentation for **Stream Chat Angular SDK v8**. For the latest stable version, see the [latest version (v7)](https://getstream.io/chat/docs/sdk/angular/).

The `ChannelPreview` component displays a channel preview in the channel list, it consists of the image, name (or list of members if name isn't defined) and latest message of the channel. The channel name and image are read from `channel.data.custom.name` and `channel.data.custom.image`.

![Channel Preview](https://getstream.io/docs-assets/images/7c9e0bad0326.png)

## Basic usage

The `ChannelPreview` component is displayed inside the built-in [channel list component](https://getstream.io/chat/docs/sdk/angular/v8/components/ChannelListComponent/). If you're building your own channel list, this is how you can use this component:

```html
<stream-channel-preview [channel]="channel"></stream-channel-preview>
```

## Customization

1. You can provide your own template for the channel preview info (marked with the red rectangle on the screenshot) by providing your own template for the [`customTemplatesService.channelPreviewInfoTemplate$`](https://getstream.io/chat/docs/sdk/angular/v8/services/CustomTemplatesService/#channelpreviewinfotemplate). The template context (`ChannelPreviewInfoContext`) contains the `channel`, `channelDisplayTitle`, `unreadCount`, `latestMessageText`, `latestMessageStatus`, `latestMessageTime` and `latestMessage` (a `LocalMessage` from `stream-chat`, its dates are `TimestampNS`).

![Channel Preview Info](https://getstream.io/docs-assets/images/91d61a4cb2e1.png)

2. If you want to customize the channel avatar, please refer to the [avatar customization section](https://getstream.io/chat/docs/sdk/angular/v8/components/AvatarComponent/#customization)

3. You can replace the whole component by providing your own template for the [`customTemplatesService.channelPreviewTemplate$`](https://getstream.io/chat/docs/sdk/angular/v8/services/CustomTemplatesService/#channelpreviewtemplate).

4. The [`MessageService`](https://getstream.io/chat/docs/sdk/angular/v8/services/MessageService/) provides some customization options for message display that are applied to both the message and channel preview components

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

## Inputs and outputs

### channel

**channel**: `undefined` \| `Channel`

The channel to be displayed

#### Defined in

[lib/channel-preview/channel-preview.component.ts:27](https://github.com/GetStream/stream-chat-angular/blob/8ed7ea67ea3deb96c2ae7fcccfd82bd32ad7f184/projects/stream-chat-angular/src/lib/channel-preview/channel-preview.component.ts#L27)

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

---

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