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.
![](/chat/docs/sdk/assets/images/channel-preview-00dd349d85ef9d0fbfac21387ead8b1b.png)
Basic usage
The ChannelPreview
component is displayed inside the built-in channel list component. If you're building you own channel list, this is how you can use this component:
<stream-channel-preview [channel]="channel"></stream-channel-preview>
Customization
- 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$
.
![](/chat/docs/sdk/assets/images/channel-preview-info-dab39b2ed4fc5ca93c8c64e170f5a0b3.png)
If you want to customize the channel avatar, please refer to the avatar customization section
You can replace the whole component by providing your own template for the
customTemplatesService.channelPreviewInfoTemplate$
.The
MessageService
provides some customization options for message display the are applied to both the message and channel preview components
Inputs and outputs
channel
• channel: undefined
| Channel
<DefaultStreamChatGenerics
>
The channel to be displayed