# ChannelPreviewComponent

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.

![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/components/ChannelListComponent/). If you're building you 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/services/CustomTemplatesService/#channelpreviewinfotemplate).

![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/components/AvatarComponent/#customization)

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

4. The [`MessageService`](https://getstream.io/chat/docs/sdk/angular/services/MessageService/) provides some customization options for message display the 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

[projects/stream-chat-angular/src/lib/channel-preview/channel-preview.component.ts:27](https://github.com/GetStream/stream-chat-angular/blob/b8e03ec6da285f5e7c533ce710ebb946cded1190/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/components/ChannelPreviewComponent/](https://getstream.io/chat/docs/sdk/angular/components/ChannelPreviewComponent/).