Skip to main content
Version: v5 (beta)

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

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

Defined in

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

Did you find this page helpful?