New to Kendo UI for Angular? Start a free 30-day trial

Angular Chat Data Binding

The Chat component is a powerful tool that requires data-binding to display array collections into messages. This article shows how to connect your Chat component to streaming data, manage user identities, and handle message flow in Angular applications.

You can use the Chat component to build customer support chats or AI-powered conversations. This article gives you practical examples and best practices for working with message data in Chat.

Binding Chat Messages

To bind the Chat messages, set the messages property to an array of Messages objects. Each Messages 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.

html
<kendo-chat [messages]="messages" [authorId]="user.id"></kendo-chat>
ts
public bot: User = {
    id: 0,
    name: 'Jane',
    avatarUrl: 'assets/dropdowns/contacts/BERGS.jpg',
};

public user: User = {
    id: 1,
    name: 'John',
    avatarUrl: 'assets/dropdowns/contacts/SPLIR.jpg',
};
public messages: Messages[] = [
    {
        id: guid(),
        text: "Hello, my name is John",
        author: this.user,
        timestamp: new Date(2025, 2,2,10,30)
    },
    {
        id: guid(),
        text: "Hello, my name is Jane and I am a chat bot.",
        author: this.bot,
        timestamp: new Date(2025, 2,2,10,31)
    }
]

The following example demonstrates how to bind the messages of the Chat.

Change Theme

Theme

Loading ...

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.

html
<kendo-chat [messages]="messages$ | async" [user]="user"></kendo-chat>
ts
public messages: Observable<Message[]>;

The following example demonstrates streaming messages in the Chat. The messages are mocked for the demo.