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
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
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:54
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:58
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:62
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:68
customMessageActions
• customMessageActions: CustomMessageActionItem<any>[] = []
A list of custom message actions to be displayed in the message action box
deprecated please use the MessageActionsService to set this property.
Defined in
lib/message-list/message-list.component.ts:74
displayDateSeparator
• displayDateSeparator: boolean = true
If true date separators will be displayed
Defined in
lib/message-list/message-list.component.ts:78
displayUnreadSeparator
• displayUnreadSeparator: boolean = true
If true unread indicator will be displayed
Defined in
lib/message-list/message-list.component.ts:82
dateSeparatorTextPos
• dateSeparatorTextPos: "center" | "right" | "left" = '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:86
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:90
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:97
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