Info:
This is documentation for Stream Chat Angular SDK v5, which is no longer actively maintained. For up-to-date documentation, see the latest version (v7).

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

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

  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$.
Channel Preview Info

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

  2. You can replace the whole component by providing your own template for the customTemplatesService.channelPreviewInfoTemplate$.

  3. 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

Defined in

projects/stream-chat-angular/src/lib/channel-preview/channel-preview.component.ts:28

Add Chat to my app: getstream.io/SKILL.md

The fastest way to build with Stream. Start a new project or improve an existing one. Full CLI and documentation integration out of the box.

Ask your agent:

/stream Build me a Social App with Feeds and Moderation.
/stream Any livestream calls running?
/stream Chat Angular v5: <Your Question>