Angular Chat Scroll Modes
The Chat component supports two scroll modes that control how users navigate through message history—the default scrollable mode and the endless scrolling mode that loads messages on demand.
Endless Scrolling
In endless scrolling mode, the Chat loads messages in batches as the user scrolls up through the conversation. This approach improves performance when you work with large conversation histories by rendering only a subset of messages at a time.
The Chat component emits the loadMore event when the user scrolls to the edge of the message list. The event provides the startIndex and endIndex values which you can use to fetch the next batch of messages from your data source.
You can use the endless scrolling mode with local and remote data sources.
Local Data
To enable endless scrolling with local data, set the scrollMode property to 'endless' and the pageSize property to control how many messages load in each batch. The default value is 50. The Chat component handles pagination of the local messages array internally.
You can also configure the Auto-Scroll Threshold to control how the component brings new receiver messages into view.
The following example demonstrates endless scrolling with a local data source. Scroll up in the message list to load earlier messages in batches of 30.
Remote Data
You can use the endless scrolling mode with a remote data source. This allows you to fetch messages from a server or other external source as needed, instead of loading the entire conversation history at once, which improves performance and reduces initial load times.
To enable endless scrolling with a remote data source, set the following properties in addition to scrollMode and pageSize:
total—The total number of messages in the conversation.startIndex—The start of the currently loaded batch in the full message list.endIndex—The exclusive end of the currently loaded batch in the full message list.pinnedMessages—All pinned messages in the conversation.repliedToMessages—Reply target messages that exist outside the loadedmessagesarray.
Handle the referencedMessageClick event to navigate to messages outside the loaded batch. The event provides the id and type of the referenced message so you can fetch it from the server if needed.
The following example demonstrates how to implement endless scrolling with a remote data source.
Scrollable
The scrollable mode is the default scroll behavior of the Chat. In this mode, all bound messages render at once and the message list scrolls normally.
If you need to switch back from endless scrolling, set the scrollMode property to 'scrollable'. You can also configure the Auto-Scroll Threshold to control how the component brings new receiver messages into view.
The following example demonstrates the scrollable mode with all messages rendered at once.
Auto-Scroll Threshold
The auto-scroll threshold feature allows keeping older messages visible when a new receiver message arrives. This prevents the component from scrolling if the user is actively reading older messages and a new message arrives.
By default, the threshold is set to 20% of the visible message area height, but you can adjust this value as needed by setting the autoScrollThreshold property to a string percentage or a number of pixels.
Author messages always scroll to the bottom.
The following example demonstrates the auto-scroll threshold feature. Adjust the threshold value using the input field and click any of the suggestions to see how it affects the scroll behavior when new messages arrive.