Angular Chat Templates
You can use the available Chat templates to customize every aspect of the chat interface.
Chat Layout Templates
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.
To implement a custom header template, nest an <ng-template> tag with the ChatHeaderTemplateDirective directive inside the <kendo-chat> tag.
The following example demonstrates a customized Chat header.
No Data Template
The Chat no data template lets you customize the Chat appearance when there are no messages.
To implement a custom no data template, nest an <ng-template> tag with the NoDataTemplateDirective directive inside the <kendo-chat> tag.
The following example demonstrates the Chat interface with a custom no data view.
Message Templates
Full 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.
To implement a custom message template, nest an <ng-template> tag with the MessageTemplateDirective directive inside the <kendo-chat> tag.
The following example demonstrates how to apply custom look and feel to the Chat messages.
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.
To customize the author and receiver messages separately, nest an <ng-template> tag with the ReceiverMessageTemplateDirective and AuthorMessageTemplateDirective directives inside the <kendo-chat> tag.
The following example demonstrates how to apply custom look and feel to the Chat messages based on their author.
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 Full Message Template instead.
To customize the text, nest an <ng-template> tag with the MessageContentTemplateDirective directive inside the <kendo-chat> tag.
The following example shows how to customize the typography of the Chat message text.
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.
To customize the author and receiver messages separately, nest an <ng-template> tag with the ReceiverMessageContentTemplateDirective and AuthorMessageContentTemplateDirective directives inside the <kendo-chat> tag.
The following example customizes the messages text appearance in the Chat based on the user.
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.
Status and Timestamp Templates
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.
To customize timestamp display, use an <ng-template> tag with the TimestampTemplateDirective directive inside the <kendo-chat> tag.
The following demo shows how to apply custom timestamp format to 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.
To implement a custom status template, nest an <ng-template> tag with the ChatStatusTemplateDirective directive inside the <kendo-chat> tag.
The following example demonstrates customized status messages containing both text and icons.
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.
To implement a custom user status template, nest an <ng-template> tag with the ChatUserStatusTemplateDirective directive inside the <kendo-chat> tag.
The following example demonstrates the user status template of the Chat in action.
Message Box Templates
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.
To implement a custom suggestion template, nest an <ng-template> tag with the ChatSuggestionTemplateDirective directive inside the <kendo-chat> tag.
The following example demonstrates the suggestion template of the Chat in action.
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.
To implement a custom message box template, nest an <ng-template> tag with the ChatMessageBoxTemplateDirective directive inside the <kendo-chat> tag.
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.
The following example demonstrates the message box template of the Chat in action.
Message Box Affix Templates
The affix templates let you extend the built-in message box with extra controls without replacing the default UI. The Chat provides three affix positions, each mapped to a dedicated template directive:
kendoChatMessageBoxStartAffixTemplate— renders content at the start of the message box, to the right of the file select button.kendoChatMessageBoxEndAffixTemplate— renders content at the end of the message box, to the left of the speech-to-text button.kendoChatMessageBoxTopAffixTemplate— renders content above the text input area. Only visible inmultimode.
The following example demonstrates all three affix positions. Use the configurator to toggle each affix on or off and switch between message box modes.