Angular Chat Properties

Default Value: true

The UI component switches to the active state when users press down the primary mouse button. When this property is set to true, the CSS rules for the active state apply. You can change these rules to customize the component.

Use this property when you display the component on a platform whose guidelines include the active state change for UI components.

alerts

A list of available alerts.

Selector: dxi-alert

Type:

Array<Alert>

Default Value: []

The code snippet below produces the following result:

The alert message in the Chat component

jQuery

index.js

$(() => {
    $('#chat').dxChat({
        onMessageEntered: (e) => {
            setTimeout(() => {
                e.component.option("alerts", alerts);
            }, 1000);
        }
    });
});

const alerts = [
    {
        id: 1,
        message: "You have been disconnected"
    }
];

Angular

app.component.html

app.component.ts

<dx-chat 
    [alerts]="alerts"
    (onMessageEntered)="onMessageEntered($event)"
></dx-chat>

import { DxChatTypes } from "devextreme-angular/ui/chat";
// ...
export class AppComponent {
    alerts: DxChatTypes.Alert[] = [];
    newAlert: DxChatTypes.Alert =
    {
        id: 1,
        message: "You have been disconnected"
    };
    onMessageEntered() {
        setTimeout(() => {
            this.alerts = [...this.alerts, newAlert];
        }, 1000);
    }
}

Vue

App.vue

<template>
<DxChat
    :alerts="alerts"
    @message-entered="onMessageEntered"
/>
</template>

<script setup>
import DxChat from "devextreme-vue/chat";
const alerts = [];
const newAlert =
{
    id: 1,
    message: "You have been disconnected"
};
const onMessageEntered = () => {
    setTimeout(() => {
        this.alerts = [...this.alerts, newAlert];
    }, 1000);
}
</script>

React

App.js

import React, { useCallback, useState } from "react";
import Chat from "devextreme-react/chat";

const newAlert =
{
    id: 1,
    message: "You have been disconnected"
};

const App = () => {
    const [alerts, setAlerts] = useState();
    const onMessageEntered = () => {
        setTimeout(() => {
            setAlerts((prevAlerts) => [...prevAlerts, newAlert]);
        }, 1000);
    };
    return (
        <Chat
            onMessageEntered={onMessageEntered}
            alerts={alerts}
        />
    );
};

dataSource

Binds the UI component to data.

Type:

|

|

|

|

DataSource Configuration

| null

Default Value: null

IMPORTANT

If you use DataSource, disable pagination to ensure Chat functions properly.

Chat works with collections of objects or string values.

Depending on your data source, bind Chat to data as follows.

Data Array
Assign the array to the dataSource option.
Read-Only Data in JSON Format
Set the dataSource property to the URL of a JSON file or service that returns JSON data.
OData
Implement an ODataStore.

Web API, PHP, MongoDB
Use one of the following extensions to enable the server to process data according to the protocol DevExtreme UI components use:

Then, use the createStore method to configure access to the server on the client as shown below. This method is part of DevExtreme.AspNet.Data.

jQuery

JavaScript

$(function() {
    let serviceUrl = "https://url/to/my/service";
    $("#chatContainer").dxChat({
        // ...
        dataSource: DevExpress.data.AspNet.createStore({
            key: "ID",
            loadUrl: serviceUrl + "/GetAction",
            insertUrl: serviceUrl + "/InsertAction",
            updateUrl: serviceUrl + "/UpdateAction",
            deleteUrl: serviceUrl + "/DeleteAction"
        })
    })
});

Angular

app.component.ts

app.component.html

app.module.ts

import { Component } from '@angular/core';
import CustomStore from 'devextreme/data/custom_store';
import { createStore } from 'devextreme-aspnet-data-nojquery';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    store: CustomStore;
    constructor() {
        let serviceUrl = "https://url/to/my/service";
        this.store = createStore({
            key: "ID",
            loadUrl: serviceUrl + "/GetAction",
            insertUrl: serviceUrl + "/InsertAction",
            updateUrl: serviceUrl + "/UpdateAction",
            deleteUrl: serviceUrl + "/DeleteAction"
        })
    }
}

<dx-chat ...
    [dataSource]="store">
</dx-chat>

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxChatModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxChatModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

Vue

App.vue

<template> 
    <DxChat ...
        :data-source="store" />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import CustomStore from 'devextreme/data/custom_store';
import { createStore } from 'devextreme-aspnet-data-nojquery';
import { DxChat } from 'devextreme-vue/chat';

export default {
    components: {
        DxChat
    },
    data() {
        const serviceUrl = "https://url/to/my/service";
        const store = createStore({
            key: "ID",
            loadUrl: serviceUrl + "/GetAction",
            insertUrl: serviceUrl + "/InsertAction",
            updateUrl: serviceUrl + "/UpdateAction",
            deleteUrl: serviceUrl + "/DeleteAction"
        });
        return {
            store
        }
    }
}
</script>

React

App.js

import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import CustomStore from 'devextreme/data/custom_store';
import { createStore } from 'devextreme-aspnet-data-nojquery';
import Chat from 'devextreme-react/chat';

const serviceUrl = "https://url/to/my/service";
const store = createStore({
    key: "ID",
    loadUrl: serviceUrl + "/GetAction",
    insertUrl: serviceUrl + "/InsertAction",
    updateUrl: serviceUrl + "/UpdateAction",
    deleteUrl: serviceUrl + "/DeleteAction"
});

class App extends React.Component {
    render() {
        return (
            <Chat ...
                dataSource={store} />
        );
    }
}
export default App;

Any other data source
Implement a CustomStore.

Regardless of the data source on the input, the Chat always wraps it in the DataSource object. This object allows you to sort, filter, group, and perform other data shaping operations. To get its instance, call the getDataSource() method.

NOTE

Review the following notes about data binding:

Do not specify the items property if you specified the dataSource, and vice versa.
Data field names cannot be equal to this and should not contain the following characters: ., :, [, and ].

jQuery

The stores are immutable. You cannot change their configurations at runtime. Instead, create a new store or DataSource and assign it to the dataSource property as shown in the following help topic: Get and Set Properties.

Angular

The stores are immutable. You cannot change their configurations at runtime. Instead, create a new store or DataSource and assign it to the dataSource property as shown in the following help topic: Two-Way Property Binding.

Vue

The stores are immutable. You cannot change their configurations at runtime. Instead, create a new store or DataSource and assign it to the dataSource property as shown in the following help topic: Two-Way Property Binding.

React

The stores are immutable. You cannot change their configurations at runtime. Instead, create a new store or DataSource and assign it to the dataSource property as shown in the following help topic: Controlled Mode.

dayHeaderFormat

Specifies the day header format.

Selector: dxo-day-header-format

Type:

Format

Default Value: 'shortdate'

disabled

Specifies whether the UI component responds to user interaction.

Type:

Default Value: false

elementAttr

Specifies the global attributes to be attached to the UI component's container element.

Selector: dxo-element-attr

Type:

Object

Default Value: {}

jQuery

$(function(){
    $("#chatContainer").dxChat({
        // ...
        elementAttr: {
            id: "elementId",
            class: "class-name"
        }
    });
});

Angular

HTML

TypeScript

<dx-chat ...
    [elementAttr]="{ id: 'elementId', class: 'class-name' }">
</dx-chat>

import { DxChatModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxChatModule
    ],
    // ...
})

Vue

App.vue

<template>
    <DxChat ...
        :element-attr="chatAttributes">
    </DxChat>
</template>

<script>
import DxChat from 'devextreme-vue/chat';

export default {
    components: {
        DxChat
    },
    data() {
        return {
            chatAttributes: {
                id: 'elementId',
                class: 'class-name'
            }
        }
    }
}
</script>

React

App.js

import React from 'react';

import Chat from 'devextreme-react/chat';

class App extends React.Component {
    chatAttributes = {
        id: 'elementId',
        class: 'class-name'
    }

    render() {
        return (
            <Chat ...
                elementAttr={this.chatAttributes}>
            </Chat>
        );
    }
}
export default App;

focusStateEnabled

Specifies whether the Chat's input element can be focused using keyboard navigation.

Type:

Default Value: true

height

Specifies the UI component's height.

Type:

|

|

| undefined

Return Value:

|

The UI component's height.

Default Value: undefined

This property accepts a value of one of the following types:

Number
The height in pixels.
String
A CSS-accepted measurement of height. For example, "55px", "20vh", "80%", "inherit".
Function (deprecated since v21.2)
Refer to the W0017 warning description for information on how you can migrate to viewport units.

hoverStateEnabled

Specifies whether the UI component changes its state when a user pauses on it.

Type:

Default Value: true

items

Specifies an array of chat messages.

Selector: dxi-item

Type:

Array<Message>

Raised Events: onOptionChanged

jQuery

NOTE

The renderMessage(message) method is the primary way to render a new message in jQuery. Use items only to specify initial messages.

Angular

Use this property to render a new message and specify initial messages in Angular.

app.component.html

app.component.ts

<dx-chat 
    [items]="messages"
    (onMessageEntered)="onMessageEntered($event)"
></dx-chat>

import { DxChatTypes } from "devextreme-angular/ui/chat";
// ...
export class AppComponent {
    messages: DxChatTypes.Message[] = [
        {
            timestamp: Date.now(),
            author: secondUser,
            text: `Hello! I'm here to help you. How can I assist you today?`,
        }
    ];
    onMessageEntered({ message }) {
        this.messages = [...this.messages, message];
    }
}

Vue

Use this property to render a new message and specify initial messages in Angular.

App.vue

<template>
<DxChat
    :items="messages"
    @message-entered="onMessageEntered"
/>
</template>

<script setup>
import DxChat from "devextreme-vue/chat";
const messages = [
    {
        timestamp: Date.now(),
        author: secondUser,
        text: `Hello! I'm here to help you. How can I assist you today?`,
    }
];
const onMessageEntered = ({ message }) => {
    messages.value = [...messages.value, message];
};
</script>

React

Use this property to render a new message and specify initial messages in Angular.

App.js

import React, { useCallback, useState } from "react";
import Chat from "devextreme-react/chat";

const initialMessage = {
    timestamp: Date.now(),
    author: secondUser,
    text: `Hello! I'm here to help you. How can I assist you today?`,
};

const App = () => {
    const [messages, setMessages] = useState(initialMessage);
    const onMessageEntered = useCallback(({ message }) => {
        setMessages((prevMessages) => [...prevMessages, message]);
    }, []);

    return (
        <Chat
            onMessageEntered={onMessageEntered}
            items={messages}
        />
    );
};

messageTemplate

Specifies a custom template for a chat message.

Type:

template

| null

Function parameters:

data:

Object

The current data object.

Object structure:

Name	Type	Description
component	dxChat	The Chat instance.
message	Message	The message text.

Name

Type

Description

component

dxChat

The Chat instance.

message

Message

The message text.

messageBubbleElement:

The message's container. It is an HTML Element or a jQuery Element when you use jQuery.

Return Value:

|

Element

|

jQuery

A template name or container.

Default Value: null

jQuery

index.js

$(() => {
    const chat = $("#chat").dxChat({
        messageTemplate: (data, $container) => {
            return data.message.id + " " + data.message.text;
        },
    }).dxChat('instance');
});

Angular

app.component.html

<dx-chat 
    messageTemplate="message"
>
    <div *dxTemplate="let data of 'message'">
        {{data.message.id + " " + data.message.text}}
    </div>
</dx-chat>

Vue

App.vue

<template>
<DxChat message-template="message">
    <template #message="{ data }">
        {{ data.message.id + " " + data.message.text }}
    </template>
</DxChat>
</template>

React

App.js

import React from "react";
import Chat from "devextreme-react/chat";

const messageRender = (data) => {
    return (<div>{data.message.id + " " + data.message.text}</div>);
}

const App = () => {
    return (
        <Chat
            messageRender={messageRender}
        />
    );
};

messageTimestampFormat

Specifies the message timestamp format.

Selector: dxo-message-timestamp-format

Type:

Format

Default Value: 'shorttime'

onDisposing

A function that is executed before the UI component is disposed of.

Type:

Function parameters:

e:

DisposingEvent

Information about the event.

Object structure:

Name	Type	Description
element	HTMLElement \| jQuery	The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
component	Chat	The UI component's instance.

Name

Type

Description

element

The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.

component

Chat

The UI component's instance.

Default Value: null

onInitialized

A function used in JavaScript frameworks to save the UI component instance.

Type:

Function parameters:

e:

InitializedEvent

Information about the event.

Object structure:

Name	Type	Description
element	HTMLElement \| jQuery	The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
component	Chat	The UI component's instance.

Name

Type

Description

element

The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.

component

Chat

The UI component's instance.

Default Value: null

Angular

app.component.html

app.component.ts

<dx-chat ...
    (onInitialized)="saveInstance($event)">
</dx-chat>

import { Component } from "@angular/core";
import Chat from "devextreme/ui/data_grid";
// ...
export class AppComponent {
    chatInstance: Chat;
    saveInstance (e) {
        this.chatInstance = e.component;
    }
}

Vue

App.vue (Options API)

App.vue (Composition API)

<template>
    <div>
        <DxChat ...
            @initialized="saveInstance">
        </DxChat>
    </div>
</template>

<script>
import DxChat from 'devextreme-vue/chat';

export default {
    components: {
        DxChat
    },
    data: function() {
        return {
            chatInstance: null
        };
    },
    methods: {
        saveInstance: function(e) {
            this.chatInstance = e.component;
        }
    }
};
</script>

<template>
    <div>
        <DxChat ...
            @initialized="saveInstance">
        </DxChat>
    </div>
</template>

<script setup>
import DxChat from 'devextreme-vue/chat';

let chatInstance = null;

const saveInstance = (e) => {
    chatInstance = e.component;
}
</script>

React

App.js

import Chat from 'devextreme-react/chat';

class App extends React.Component {
    constructor(props) {
        super(props);

        this.saveInstance = this.saveInstance.bind(this);
    }

    saveInstance(e) {
        this.chatInstance = e.component;
    }

    render() {
        return (
            <div>
                <Chat onInitialized={this.saveInstance} />
            </div>
        );
    }
}

jQuery

Get a UI component Instance in jQuery

Angular

Get a UI component Instance in Angular

Vue

Get a UI component Instance in Vue

React

Get a UI component Instance in React

onMessageEntered

A function that is executed after a message is entered into the chat.

Type:

| undefined

Function parameters:

e:

MessageEnteredEvent

Information about the event.

Object structure:

Name	Type	Description
component	Chat	The UI component's instance.
element	HTMLElement \| jQuery	The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
event	Event (jQuery or EventObject)	The event that caused the function to execute. It is an EventObject or a jQuery.Event when you use jQuery.
message	Message	The entered message.

Default Value: undefined

Use this function to transfer messages to the backend:

jQuery

index.js

$(() => {
    function sendToBackend(message, chat) {
        console.log(`Message sent to backend: ${message.text}`);
        // Backend logic goes here
    }
    const chat = $("#chat").dxChat({
        onMessageEntered: (e) => {
            sendToBackend(e.message, chat);
        },
    }).dxChat('instance');
});

Angular

app.component.html

app.component.ts

<dx-chat 
    [items]="messages"
    (onMessageEntered)="onMessageEntered($event)"
></dx-chat>

import { DxChatTypes } from "devextreme-angular/ui/chat";
// ...
export class AppComponent {
    messages: DxChatTypes.Message[] = [];
    onMessageEntered({ message }) {
        this.messages = [...this.messages, message];
        this.sendToBackend(message);
    }
    sendToBackend(message: DxChatTypes.Message) {
        console.log(`Message sent to backend: '${message.text}'`);
        // Backend logic goes here
    }
}

Vue

App.vue

<template>
<DxChat
    :items="messages"
    @message-entered="onMessageEntered"
/>
</template>

<script setup>
import DxChat from "devextreme-vue/chat";
const onMessageEntered = ({ message }) => {
    messages.value = [...messages.value, message];
    sendToBackend(message);
};
const sendToBackend = (message) => {
    console.log(`Message sent to backend: '${message.text}'`);
    // Backend logic goes here
}
</script>

React

App.js

import React, { useCallback, useState } from "react";
import Chat from "devextreme-react/chat";

const App = () => {
    const [messages, setMessages] = useState();
    const onMessageEntered = useCallback(({ message }) => {
        setMessages((prevMessages) => [...prevMessages, message]);
        sendToBackend(message);
    }, []);
    const sendToBackend = (message) => {
        console.log(`Message sent to backend: '${message.text}'`);
        // Backend logic goes here
    }

    return (
        <Chat
            onMessageEntered={onMessageEntered}
            items={messages}
        />
    );
};

onOptionChanged

A function that is executed after a UI component property is changed.

Type:

Function parameters:

e:

OptionChangedEvent

Information about the event.

Object structure:

Name	Type	Description
value	any	The modified property's new value.
previousValue	any	The modified property's previous value.
name	String	The modified property if it belongs to the first level. Otherwise, the first-level property it is nested into.
fullName	String	The path to the modified property that includes all parent properties.
element	HTMLElement \| jQuery	The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
component	Chat	The UI component's instance.

Default Value: null

The following example shows how to subscribe to component property changes:

jQuery

index.js

$(function() {
    $("#chatContainer").dxChat({
        // ...
        onOptionChanged: function(e) {
            if(e.name === "changedProperty") {
                // handle the property change here
            }
        }
    });
});

Angular

app.component.html

app.component.ts

app.module.ts

<dx-chat ...
    (onOptionChanged)="handlePropertyChange($event)"> 
</dx-chat>

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 

export class AppComponent { 
    // ...
    handlePropertyChange(e) {
        if(e.name === "changedProperty") { 
            // handle the property change here
        }
    }
}

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { AppComponent } from './app.component'; 
import { DxChatModule } from 'devextreme-angular'; 

@NgModule({ 
    declarations: [ 
        AppComponent 
    ], 
    imports: [ 
        BrowserModule, 
        DxChatModule 
    ], 
    providers: [ ], 
    bootstrap: [AppComponent] 
}) 

export class AppModule { }

Vue

App.vue

<template> 
    <DxChat ...
        @option-changed="handlePropertyChange"
    />            
</template> 

<script>  
import 'devextreme/dist/css/dx.light.css'; 
import DxChat from 'devextreme-vue/chat'; 

export default { 
    components: { 
        DxChat
    }, 
    // ...
    methods: { 
        handlePropertyChange: function(e) {
            if(e.name === "changedProperty") {
                // handle the property change here
            }
        }
    } 
} 
</script>

React

App.js

import React from 'react';  
import 'devextreme/dist/css/dx.light.css'; 

import Chat from 'devextreme-react/chat'; 

const handlePropertyChange = (e) => {
    if(e.name === "changedProperty") {
        // handle the property change here
    }
}

export default function App() { 
    return ( 
        <Chat ...
            onOptionChanged={handlePropertyChange}
        />        
    ); 
}

onTypingEnd

A function that is called 2 seconds after a user stops typing or after a message is entered.

Type:

| undefined

Function parameters:

e:

TypingEndEvent

Information about the event.

Object structure:

Name

Type

Description

component

Chat

The UI component's instance.

element

The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.

user

User

The user who entered the message.

Default Value: undefined

onTypingStart

A function that is called after a user starts typing.

Type:

| undefined

Function parameters:

e:

TypingStartEvent

Information about the event.

Object structure:

Name	Type	Description
component	Chat	The UI component's instance.
element	HTMLElement \| jQuery	The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
event	Event (jQuery or EventObject)	The event that caused the function to execute. It is an EventObject or a jQuery.Event when you use jQuery.
user	User	The user who started typing.

Default Value: undefined

reloadOnChange

Specifies whether the Chat UI component displays newly entered messages immediately. This property only applies if dataSource is used.

Type:

Default Value: true

When you send a message in a Chat (press the "Send" button), the Chat triggers the store's insert method and adds the message to the store.

If reloadOnChange is enabled (default), the dataSource reloads: clears all items and calls the load method to update itself. Chat automatically listens to dataSource changes and updates the message feed with new messages.

Disable reloadOnChange to manage large numbers of messages, prevent additional load requests, and control message rendering timing. Handle the store's CRUD operations and render messages as your needs dictate.

rtlEnabled

Switches the UI component to a right-to-left representation.

Type:

DataGrid Demo Navigation UI Demo Editors Demo

Default Value: false

When this property is set to true, the UI component text flows from right to left, and the layout of elements is reversed. To switch the entire application/site to the right-to-left representation, assign true to the rtlEnabled field of the object passed to the DevExpress.config(config) method.

JavaScript

DevExpress.config({
    rtlEnabled: true
});

showAvatar

Specifies whether to show avatars.

Type:

Default Value: true

showDayHeaders

Specifies whether to show day headers.

Type:

Default Value: true

showMessageTimestamp

Specifies whether to show message time stamps.

Type:

Default Value: true

showUserName

Specifies whether to show user names.

Type:

Default Value: true

typingUsers

An array of users who are currently typing.

Selector: dxi-typing-user

Type:

Array<User>

Default Value: []

The following image displays messages that appear when a single user or multiple users are typing:

Messages that display the number of users typing

jQuery

index.js

$(() => {
    const user = [{
        name: 'User'
    }];
    const chat = $("#chat").dxChat({
        onTypingStart:(e) => {
            e.component.option("typingUsers", user);
        },
        onTypingEnd:(e) => {
            e.component.option("typingUsers", []);
        },
    }).dxChat('instance');
});

Angular

app.component.html

app.component.ts

<dx-chat 
    (onTypingStart)="onTypingStart($event)"
    (onTypingEnd)="onTypingEnd($event)"
    [typingUsers]="typingUsers"
></dx-chat>

import { DxChatTypes } from "devextreme-angular/ui/chat";
// ...
export class AppComponent {
    typingUsers: DxChatTypes.User[] = [];
    user: DxChatTypes.User = [{
        name: 'User'
    }];
    onTypingStart() {
        this.typingUsers = this.user;
    }
    onTypingEnd() {
        this.typingUsers = [];
    }
}

Vue

App.vue

<template>
<DxChat
    :typing-users="typingUsers"
    @typing-start="onTypingStart"
    @typing-end="onTypingEnd"
/>
</template>

<script setup>
import DxChat from "devextreme-vue/chat";
const typingUsers = [];
const user = [{
    name: 'User'
}];
const onTypingStart = () => {
    typingUsers = user; 
}
const onTypingEnd = () => {
    typingUsers = []; 
}
</script>

React

App.js

import React, { useCallback, useState } from "react";
import Chat from "devextreme-react/chat";

const user = [{
    name: 'User'
}];

const App = () => {
    const [typingUsers, setTypingUsers] = useState();
    const onTypingStart = () => {
        setTypingUsers(user); 
    }
    const onTypingEnd = () => {
        setTypingUsers(); 
    }

    return (
        <Chat
            typingUsers={typingUsers}
            onTypingStart={onTypingStart}
            onTypingEnd={onTypingEnd}
        />
    );
};

user

Specifies the current chat user (messages displayed on the right side).

Selector: dxo-user

Type:

User

Default Value: { id: new Guid().toString() }

This property value, or its part, may be specified automatically:

If you do not specify this property, the component creates a user with default settings.
If you assign an object without an ID to this property, an ID is autogenerated.

visible

Specifies whether the UI component is visible.

Type:

Default Value: true

width

Specifies the UI component's width.

Type:

|

|

| undefined

Return Value:

|