MessageListComponent
The MessageList component renders a scroll-able list of messages.
The MessageList displays messages using pagination: older messages are loaded when the user scrolls to the top of the list (or to the bottom if direction is top-to-bottom), and newer messages are loaded when the user scrolls back after jumping to an older message. Messages are loaded through stream-chat's message paginators (channel.messagePaginator for channel messages, thread.messagePaginator for thread replies). If messages can't be loaded, the "Error loading messages" notification is displayed (streamChat.Error loading messages translation key).
Customization
Custom message component
If you want to customize how messages are displayed in the list, head over to the Message component's page.
Date separator
- The component provides the
displayDateSeparatoranddateSeparatorTextPosinputs for configuring the date separator's behavior. - You can customize the displayed date format by providing your own date parser.
- If you want to provide your own date separator UI, provide that to the
CustomTemplatesService.
Custom message list
The message list contains a lot of low-level logic related to scrolling, we don't advise to create your own message list component.
If you still need to, the ChannelService provides the building blocks:
activeChannelMessages$emits the loaded messages of the active channel.loadMoreMessages(andloadMoreThreadRepliesfor threads) load the next page in the given direction (olderornewer). They returnfalseif no request was made (nothing more to load in that direction or a page is already loading), otherwise aPromise<void>.activeChannelMessagesPaginationState$andactiveThreadMessagesPaginationState$emit the pagination state (hasMoreOlder,hasMoreNewer,isLoadinganderror).jumpToMessageandjumpToFirstUnreadMessageload and jump to a specific message.
Inputs and outputs
mode
mode: "main" | "thread" = 'main'
Determines if the message list should display channel messages or thread messages.
Defined in
lib/message-list/message-list.component.ts:67
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:71
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 webview
Defined in
lib/message-list/message-list.component.ts:76
displayDateSeparator
displayDateSeparator: boolean = true
If true date separators will be displayed
Defined in
lib/message-list/message-list.component.ts:80
displayUnreadSeparator
displayUnreadSeparator: boolean = true
If true unread indicator will be displayed
Defined in
lib/message-list/message-list.component.ts:84
dateSeparatorTextPos
dateSeparatorTextPos: "center" | "left" | "right" = 'center'
If date separators are displayed, you can set the horizontal position of the date text.
Defined in
lib/message-list/message-list.component.ts:88
openMessageListAt
openMessageListAt: "last-message" | "last-read-message" = 'last-message'
last-message option will open the message list at the last message, last-read-message will open the list at the last unread message. This option only works if mode is main.
Defined in
lib/message-list/message-list.component.ts:92
hideUnreadCountForNotificationAndIndicator
hideUnreadCountForNotificationAndIndicator: boolean = false
If the user has unread messages when they open the channel the UI shows the unread indicator / notification which features the unread count by default. This count will be increased every time a user receives a new message. If you don't want to show the unread count, you can turn that off.
This is only applicable for main mode, as threads doesn't have read infromation.
Defined in
lib/message-list/message-list.component.ts:99
displayLoadingIndicator
displayLoadingIndicator: boolean = true
You can turn on and off the loading indicator that signals to users that more messages are being loaded to the message list