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