Angular Chat Data Binding
The Chat component displays conversations through data binding to message arrays. To create functional chat interfaces, bind message data to the component and configure the 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. If you use custom objects, 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 end users need to visually distinguish which messages belong to which 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 the local user appear aligned to the right side of the chat, while messages from other senders appear on the left.
The following code sample shows how to set up users and bind messages to the Chat component.
<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.
To use different data models, the Chat component lets you map your custom objects to the expected Message format using the modelFields property. You can map all properties of the Message object to custom fields.
The following example demonstrates how to map custom message fields so that the Chat component displays them properly.
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 demo mocks the messages.