# 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](/chat/docs/sdk/angular/v4/components/MessageComponent/#customization/). ### Date separator - The component provides the [`displayDateSeparator`](#displaydateseparator) and [`dateSeparatorTextPos`](#dateseparatortextpos) inputs for configuring the date separator's behavior. - You can customize the displayed date format by providing your own [date parser](/chat/docs/sdk/angular/v4/services/DateParserService/#customdateparser/). - If you want to provide your own date separator UI, provide that to the [`CustomTemplatesService`](/chat/docs/sdk/angular/v4/services/CustomTemplatesService/#dateseparatortemplate/). ### 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 [//]: # "Start of generated content" ## Inputs and outputs ### mode • **mode**: `"thread"` \| `"main"` = `'main'` Determines if the message list should display channel messages or [thread messages](/chat/docs/javascript/threads/). #### Defined in [lib/message-list/message-list.component.ts:55](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L55) --- ### 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](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L59) --- ### 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](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L63) --- ### 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](https://github.com/GetStream/stream-chat-angular/issues/418) #### Defined in [lib/message-list/message-list.component.ts:69](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L69) --- ### customMessageActions • **customMessageActions**: `CustomMessageActionItem[]` = `[]` A list of custom message actions to be displayed in the message action box **`deprecated`** please use the [`MessageActionsService`](/chat/docs/sdk/angular/services/MessageActionsService/) to set this property. #### Defined in [lib/message-list/message-list.component.ts:75](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L75) --- ### displayDateSeparator • **displayDateSeparator**: `boolean` = `true` If `true` date separators will be displayed #### Defined in [lib/message-list/message-list.component.ts:79](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L79) --- ### displayUnreadSeparator • **displayUnreadSeparator**: `boolean` = `true` If `true` unread indicator will be displayed #### Defined in [lib/message-list/message-list.component.ts:83](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L83) --- ### 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](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L87) --- ### 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](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L91) --- ### 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](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L98) --- ### 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](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L102) [//]: # "End of generated content" --- This page was last updated at 2026-07-09T16:00:57.851Z. For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/angular/v4/components/MessageListComponent/](https://getstream.io/chat/docs/sdk/angular/v4/components/MessageListComponent/).