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. The channel name and image are read from channel.data.custom.name and channel.data.custom.image.

Basic usage

The ChannelPreview component is displayed inside the built-in channel list component. If you're building your own channel list, this is how you can use this component:

<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$. The template context (ChannelPreviewInfoContext) contains the channel, channelDisplayTitle, unreadCount, latestMessageText, latestMessageStatus, latestMessageTime and latestMessage (a LocalMessage from stream-chat, its dates are TimestampNS).

2. If you want to customize the channel avatar, please refer to the avatar customization section

3. You can replace the whole component by providing your own template for the customTemplatesService.channelPreviewTemplate$.

4. The MessageService provides some customization options for message display that are applied to both the message and channel preview components

Inputs and outputs

channel

channel: undefined | Channel

The channel to be displayed

Defined in

lib/channel-preview/channel-preview.component.ts:27