Angular Chat Templates
You can use the available Chat templates to customize every aspect of the chat interface.
Header Template
With the custom header template, you can add a persistent header section at the top of the chat interface. Use this template to display chat information, participant details, or action buttons.
The following example demonstrates a custom header template that shows a title and lets users download or clear the chat history.
To implement a custom header template, nest an <ng-template> tag with the ChatHeaderTemplateDirective directive inside the <kendo-chat> tag.
Message Template
With the message template you can fully customize the appearance and structure of each chat message. This includes the ability to modify the layout, add extra elements, and apply custom styles to match your application's design.
The following example demonstrates how to apply custom look and feel to the Chat messages.
To implement a custom message template, nest an <ng-template> tag with the MessageTemplateDirective directive inside the <kendo-chat> tag.
User-Specific Message Template
The Chat user-specific message template lets you fully customize the appearance and structure of each chat message based on the user.
The following example demonstrates how to apply custom look and feel to the Chat messages based on their author.
To customize the author and receiver messages separately, nest an <ng-template> tag with the ReceiverMessageTemplateDirective and AuthorMessageTemplateDirective directives inside the <kendo-chat> tag.
Message Content Template
The Chat message content template lets you customize the chat messages text appearance only. This template gives you the flexibility to define how message text renders, including styling, formatting, and extra content. To customize the entire message appearance, refer to Message Template instead.
The following example shows how to customize the typography of the Chat message text.
To customize the text, nest an <ng-template> tag with the MessageContentTemplateDirective directive inside the <kendo-chat> tag.
User-Specific Message Content Template
The Chat user-specific message content template lets you customize the chat messages text appearance based on the message author. The templates give you the flexibility to define how message text renders for different users, including styling, formatting, and extra content.
The following example customizes the messages text appearance in the Chat based on the user.
To customize the author and receiver messages separately, nest an <ng-template> tag with the ReceiverMessageContentTemplateDirective and AuthorMessageContentTemplateDirective directives inside the <kendo-chat> tag.
Timestamp Template
The Chat timestamp template lets you customize how message timestamps display throughout the chat. By default, the Chat component shows timestamps in a standard format, but you can override this to match your application's design requirements or localization needs.
The following demo shows how to apply custom timestamp format to the Chat.
To customize timestamp display, use an <ng-template> tag with the TimestampTemplateDirective directive inside the <kendo-chat> tag.
Attachment Template
Along with the custom attachments feature, the AttachmentTemplate lets you customize and display different types of attachments within the message. You can show images, videos, and any other type of content.
The following example demonstrates how to attach images to a message in the Chat.
Message Status Template
The Chat status template lets you customize the appearance and behavior of the status indicators that display for messages when you click them. Use this template to create visually appealing and informative status messages that match your application's design.
The following example demonstrates customized status messages containing both text and icons.
To implement a custom status template, nest an <ng-template> tag with the ChatStatusTemplateDirective directive inside the <kendo-chat> tag.
User Status Template
The Chat user status template lets you customize the user status indicator that displays at the bottom right corner of the avatar.
The following example demonstrates the user status template of the Chat in action.
To implement a custom user status template, nest an <ng-template> tag with the ChatUserStatusTemplateDirective directive inside the <kendo-chat> tag.
Suggestion Template
The suggestion template lets you customize the appearance and behavior of the suggestions that display above the message box of the Chat. Use this template to create visually appealing and interactive suggestion buttons that match your application's design.
The following example demonstrates the suggestion template of the Chat in action.
To implement a custom suggestion template, nest an <ng-template> tag with the ChatSuggestionTemplateDirective directive inside the <kendo-chat> tag.
Message Box Template
The message box template provides complete control over the message composition area, allowing you to replace the default input field and send button with a fully customized interface.
The following example demonstrates the message box template of the Chat in action.
To implement a custom message box template, nest an <ng-template> tag with the ChatMessageBoxTemplateDirective directive inside the <kendo-chat> tag.
This template can include any HTML elements and Angular components, giving you the flexibility to design the message input experience according to your application's needs. When you use a custom message box template, implement message submission logic programmatically using the Chat component's API methods to handle user interactions and send messages to the chat.
No Data Template
The Chat no data template lets you customize the Chat appearance when there are no messages.
The following example demonstrates the Chat interface with a custom no data view.
To implement a custom no data template, nest an <ng-template> tag with the NoDataChatTemplate directive inside the <kendo-chat> tag.
Displaying Markdown Content
You can render Markdown by utilizing the marked library in the Chat. Users can type Markdown directly in the Chat message box, and the content renders with proper formatting when displayed.
The following example demonstrates how to process and display Markdown in messages.