Angular Chat - SendButtonProperties

A configuration object for the Send button.

import { DxChatTypes } from "devextreme-angular/ui/chat"
Type: DxChatTypes.SendButtonProperties

action

Specifies the Send button's behavior.

Type:

SendButtonAction

Default Value: 'send'

The 'send' value (default) enables the standard send behavior: the button is disabled when the input field is empty, and a button click sends the message and clears the input field.

The 'custom' value disables the standard send behavior: the button is always enabled regardless of input content, and a button click does not send the message or clear the input field. Use the onClick handler to implement custom logic.

View Demo

icon

Specifies the Send button's icon.

Type:

String

Default Value: 'arrowright'

Accepts a built-in icon name, a URL to an image, or a CSS class from any icon library.

onClick

A function that is executed when the Send button is clicked.

Type:

Function

Function parameters:
e:

SendButtonClickEvent

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.

The function is called for any action value. In 'send' mode, it is called only when the button is enabled (the input field contains content).

View Demo