Angular Chat Data Binding
The Chat component displays conversations through data binding to message arrays. To create functional chat interfaces, you should bind message data to the component and configure user identity settings.
This article demonstrates how to bind message arrays to the Chat component, configure user identity for proper message alignment, map custom data objects to the Chat message format, and handle streaming message data from real-time sources.
Binding Chat Messages
To bind the Chat messages, set the messages property to an array of Message objects or any custom data structures. In case you use custom objects, you should map them to the expected Message format using the modelFields. For more information, see the Binding to Custom Objects section.
The following example demonstrates how to bind the messages of the Chat.
Each Message object contains properties such as id, text, author, timestamp, attachments, and other metadata that control how the message appears and behaves in the Chat interface.
Chat conversations involve multiple participants, so messages must be visually distinguished by their author. To differentiate between messages sent by the current user and those received from other participants (such as AI services, support agents, or other users), set the authorId property.
Messages from this user will appear aligned to the right side of the chat, while messages from other senders appear on the left.
<kendo-chat [messages]="messages" [authorId]="user.id"></kendo-chat>Binding to Custom Objects
To show messages correctly, the Chat component expects message data to follow a specific structure defined by the Message interface. But not all applications use this exact structure for their message data.
To use different data models, the Chat component allows you to map your custom objects to the expected Message format using the modelFields property. All properties of the Message object can be mapped to custom fields.
The following example demonstrates how to map custom message fields to the Chat component.
Binding to Streaming Messages
The Chat component can display messages from a data stream, such as a WebSocket or an API that provides real-time updates. To bind the Chat to a message stream, use the async pipe to handle asynchronous data sources.
<kendo-chat [messages]="messages$ | async" [user]="user"></kendo-chat>The following example demonstrates streaming messages in the Chat. The messages are mocked for the demo.