# 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](https://getstream.io/chat/docs/sdk/angular/v5/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](https://getstream.io/chat/docs/sdk/angular/v5/services/DateParserService/#customdateparser). - If you want to provide your own date separator UI, provide that to the [`CustomTemplatesService`](https://getstream.io/chat/docs/sdk/angular/v5/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**: `"main"` \| `"thread"` = `'main'` Determines if the message list should display channel messages or [thread messages](https://getstream.io/chat/docs/javascript/threads/). #### Defined in [projects/stream-chat-angular/src/lib/message-list/message-list.component.ts:63](https://github.com/GetStream/stream-chat-angular/blob/d65326c9379c93c53babc4e0ffe54519dd0712a9/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L63) --- ### 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](https://github.com/GetStream/stream-chat-angular/blob/d65326c9379c93c53babc4e0ffe54519dd0712a9/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L67) --- ### 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 [projects/stream-chat-angular/src/lib/message-list/message-list.component.ts:72](https://github.com/GetStream/stream-chat-angular/blob/d65326c9379c93c53babc4e0ffe54519dd0712a9/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L72) --- ### 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](https://github.com/GetStream/stream-chat-angular/blob/d65326c9379c93c53babc4e0ffe54519dd0712a9/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L76) --- ### 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](https://github.com/GetStream/stream-chat-angular/blob/d65326c9379c93c53babc4e0ffe54519dd0712a9/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L80) --- ### 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](https://github.com/GetStream/stream-chat-angular/blob/d65326c9379c93c53babc4e0ffe54519dd0712a9/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L84) --- ### 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](https://github.com/GetStream/stream-chat-angular/blob/d65326c9379c93c53babc4e0ffe54519dd0712a9/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L88) --- ### 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](https://github.com/GetStream/stream-chat-angular/blob/d65326c9379c93c53babc4e0ffe54519dd0712a9/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L95) --- ### 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](https://github.com/GetStream/stream-chat-angular/blob/d65326c9379c93c53babc4e0ffe54519dd0712a9/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L99) [//]: # "End of generated content" --- This page was last updated at 2026-08-07T20:37:39.801Z. For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/angular/v5/components/MessageListComponent/](https://getstream.io/chat/docs/sdk/angular/v5/components/MessageListComponent/).