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 displayDateSeparator and dateSeparatorTextPos inputs 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:55

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:59

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:63

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:69

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:75

displayDateSeparator

• displayDateSeparator: boolean = true

If true date separators will be displayed

Defined in

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

displayUnreadSeparator

• displayUnreadSeparator: boolean = true

If true unread indicator will be displayed

Defined in

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

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:87

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:91

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:98

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

Defined in

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