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.
#
CustomizationSee 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 stylesMessage 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 inlib/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 inlib/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 inlib/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 inlib/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