Skip to main content

MessageListComponent

The MessageList component renders a scroll-able list of messages.

The MessageList displays messages using pagination, new messages are loaded when the user scrolls to the top of the list.

Customization#

See our customization guide on how to provide your own message list component.

note

If you want to create your own message list, you can use the ChannelService to receive the necessary messages and interact with the Stream API.

Other building blocks, that you might find useful:

Message group styles#

Message group styles makes the message list more readable, by grouping messages from the same author on the same day together. The grouping assigns a CSS class to every message, if you want to take advantage of this functionality, you can use the getGroupStyles utility function.

Example 1 - Messages with group styles

Example 2 - Messages without group styles

Example 2 - Using a custom message component

If you only want to customize the messages (not the whole list), see the message customization guide.

Inputs and outputs#

mode#

mode: "thread" | "main" = 'main'

Determines if the message list should display channel messages or thread messages.

Defined in#

lib/message-list/message-list.component.ts:45


direction#

direction: "bottom-to-top" | "top-to-bottom" = 'bottom-to-top'

The direction of the messages in the list, bottom-to-top means newest message is at the bottom of the message list and users scroll upwards to load older messages

Defined in#

lib/message-list/message-list.component.ts:49


messageOptionsTrigger#

messageOptionsTrigger: "message-row" | "message-bubble" = 'message-row'

Determines what triggers the appearance of the message options: by default you can hover (click on mobile) anywhere in the row of the message (message-row option), or you can set message-bubble, in that case only a hover (click on mobile) in the message bubble will trigger the options to appear.

Defined in#

lib/message-list/message-list.component.ts:53


hideJumpToLatestButtonDuringScroll#

hideJumpToLatestButtonDuringScroll: boolean = false

You can hide the "jump to latest" button while scrolling. A potential use-case for this input would be to workaround a known issue on iOS Safar

Defined in#

lib/message-list/message-list.component.ts:59


customMessageActions#

customMessageActions: CustomMessageActionItem<any>[] = []

A list of custom message actions to be displayed in the message action box

Defined in#

lib/message-list/message-list.component.ts:63

Did you find this page helpful?