# 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`](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/api/chatcomponent#messages) property to an array of [`Message`](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/api/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](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/chat/data-binding#binding-to-custom-objects) section.

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

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/conversational-ui/chat/data-binding/user-identity/source.txt)

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`](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/api/chatcomponent#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.

```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)
    }
]
```

## Binding to Custom Objects

To show messages correctly, the Chat component expects message data to follow a specific structure defined by the [`Message`](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/api/message) interface.

To use different data models, the Chat component lets you map your custom objects to the expected `Message` format using the [`modelFields`](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/api/chatcomponent#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.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/conversational-ui/chat/data-binding/field-mapping/source.txt)

## 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](https://angular.dev/ecosystem/rxjs-interop/output-interop#creating-an-output-based-on-an-rxjs-observable#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 demo mocks the messages.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/conversational-ui/chat/data-binding/message-data/source.txt)

## Suggested Links

* [API Reference of the Chat](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/api)
* [Chat AI Integrations](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/chat/ai-chat/integrations)
* [Chat Messages](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/chat/message)