React
iOS
Android
Flutter
Angular
JavaScript
Unity
Unreal
Node
Python
Ruby
PHP
Java
.NET
Go
RESTMessageListComponent
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: "main" | "thread" = 'main'
Determines if the message list should display channel messages or thread messages.
Defined in
projects/stream-chat-angular/src/lib/message-list/message-list.component.ts:63
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
projects/stream-chat-angular/src/lib/message-list/message-list.component.ts:67
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
projects/stream-chat-angular/src/lib/message-list/message-list.component.ts:72
displayDateSeparator
displayDateSeparator: boolean = true
If true date separators will be displayed
Defined in
projects/stream-chat-angular/src/lib/message-list/message-list.component.ts:76
displayUnreadSeparator
displayUnreadSeparator: boolean = true
If true unread indicator will be displayed
Defined in
projects/stream-chat-angular/src/lib/message-list/message-list.component.ts:80
dateSeparatorTextPos
dateSeparatorTextPos: "center" | "left" | "right" = 'center'
If date separators are displayed, you can set the horizontal position of the date text.
Defined in
projects/stream-chat-angular/src/lib/message-list/message-list.component.ts:84
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
projects/stream-chat-angular/src/lib/message-list/message-list.component.ts:88
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
projects/stream-chat-angular/src/lib/message-list/message-list.component.ts:95
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
projects/stream-chat-angular/src/lib/message-list/message-list.component.ts:99