# MessageListComponent > **Info:** This is release candidate documentation for **Stream Chat Angular SDK v8**. For the latest stable version, see the [latest version (v7)](https://getstream.io/chat/docs/sdk/angular/). The `MessageList` component renders a scroll-able list of messages. The `MessageList` displays messages using pagination: older messages are loaded when the user scrolls to the top of the list (or to the bottom if `direction` is `top-to-bottom`), and newer messages are loaded when the user scrolls back after jumping to an older message. Messages are loaded through `stream-chat`'s message paginators (`channel.messagePaginator` for channel messages, `thread.messagePaginator` for thread replies). If messages can't be loaded, the "Error loading messages" notification is displayed (`streamChat.Error loading messages` translation key). ## 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/v8/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/v8/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/v8/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. If you still need to, the [`ChannelService`](https://getstream.io/chat/docs/sdk/angular/v8/services/ChannelService/) provides the building blocks: - [`activeChannelMessages$`](https://getstream.io/chat/docs/sdk/angular/v8/services/ChannelService/#activechannelmessages) emits the loaded messages of the active channel. - [`loadMoreMessages`](https://getstream.io/chat/docs/sdk/angular/v8/services/ChannelService/#loadmoremessages) (and [`loadMoreThreadReplies`](https://getstream.io/chat/docs/sdk/angular/v8/services/ChannelService/#loadmorethreadreplies) for threads) load the next page in the given direction (`older` or `newer`). They return `false` if no request was made (nothing more to load in that direction or a page is already loading), otherwise a `Promise`. - [`activeChannelMessagesPaginationState$`](https://getstream.io/chat/docs/sdk/angular/v8/services/ChannelService/#activechannelmessagespaginationstate) and [`activeThreadMessagesPaginationState$`](https://getstream.io/chat/docs/sdk/angular/v8/services/ChannelService/#activethreadmessagespaginationstate) emit the pagination state (`hasMoreOlder`, `hasMoreNewer`, `isLoading` and `error`). - [`jumpToMessage`](https://getstream.io/chat/docs/sdk/angular/v8/services/ChannelService/#jumptomessage) and [`jumpToFirstUnreadMessage`](https://getstream.io/chat/docs/sdk/angular/v8/services/ChannelService/#jumptofirstunreadmessage) load and jump to a specific message. [//]: # "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 [lib/message-list/message-list.component.ts:67](https://github.com/GetStream/stream-chat-angular/blob/8ed7ea67ea3deb96c2ae7fcccfd82bd32ad7f184/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L67) --- ### 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:71](https://github.com/GetStream/stream-chat-angular/blob/8ed7ea67ea3deb96c2ae7fcccfd82bd32ad7f184/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L71) --- ### 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:76](https://github.com/GetStream/stream-chat-angular/blob/8ed7ea67ea3deb96c2ae7fcccfd82bd32ad7f184/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L76) --- ### displayDateSeparator **displayDateSeparator**: `boolean` = `true` If `true` date separators will be displayed #### Defined in [lib/message-list/message-list.component.ts:80](https://github.com/GetStream/stream-chat-angular/blob/8ed7ea67ea3deb96c2ae7fcccfd82bd32ad7f184/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L80) --- ### displayUnreadSeparator **displayUnreadSeparator**: `boolean` = `true` If `true` unread indicator will be displayed #### Defined in [lib/message-list/message-list.component.ts:84](https://github.com/GetStream/stream-chat-angular/blob/8ed7ea67ea3deb96c2ae7fcccfd82bd32ad7f184/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L84) --- ### dateSeparatorTextPos **dateSeparatorTextPos**: `"center"` \| `"left"` \| `"right"` = `'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:88](https://github.com/GetStream/stream-chat-angular/blob/8ed7ea67ea3deb96c2ae7fcccfd82bd32ad7f184/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L88) --- ### 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:92](https://github.com/GetStream/stream-chat-angular/blob/8ed7ea67ea3deb96c2ae7fcccfd82bd32ad7f184/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L92) --- ### 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:99](https://github.com/GetStream/stream-chat-angular/blob/8ed7ea67ea3deb96c2ae7fcccfd82bd32ad7f184/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L99) --- ### 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:103](https://github.com/GetStream/stream-chat-angular/blob/8ed7ea67ea3deb96c2ae7fcccfd82bd32ad7f184/projects/stream-chat-angular/src/lib/message-list/message-list.component.ts#L103) [//]: # "End of generated content" --- For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/angular/v8/components/MessageListComponent/](https://getstream.io/chat/docs/sdk/angular/v8/components/MessageListComponent/).