Angular Chat Templates
The Chat component provides extensive templating capabilities that allow you to customize every aspect of the chat interface.
You can customize the Chat component and its elements to fit your application's design and functionality requirements by using templates for:
Header Template
The Chat component supports a custom header template that allows you to add a persistent header section at the top of the chat interface. This is useful for displaying 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 the header template of the Chat in action.
Message Template
The message template allows you to fully customize the appearance and structure of each chat message. This includes the ability to modify the layout, add additional 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 the message template of the Chat in action.
User-Specific Message Template
The Chat component provides a user-specific message template that allows you to 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 directive inside the <kendo-chat> tag.
The following example demonstrates the user-specific message template of the Chat in action.
Message Content Template
The Chat component provides a message content template that allows you to customize the chat messages text appearance. This template gives you the flexibility to define how message text is rendered, including styling, formatting, and additional content.
To customize the text, nest an <ng-template> tag with the MessageContentTemplateDirective directive inside the <kendo-chat> tag.
The following example customizes the messages text appearance in the Chat.
User-Specific Message Content Template
The Chat component provides a user-specific message content template that allows you to customize the chat messages text appearance 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.
The templates give you the flexibility to define how message text is rendered for different users, including styling, formatting, and additional content.
The following example customizes the messages text appearance in the Chat based on the user.
Timestamp Template
The timestamp template allows you to customize how message timestamps are displayed 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.
Attachment Template
Along with the custom attachments feature, the AttachmentTemplate allows you to 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 status template allows you to customize the appearance and behavior of the status messages displayed for messages when clicked. You can 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 the status template of the Chat in action. Click the message to see the status.
User Status Template
The template allows you to customize the user status indicator displayed 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.
Suggestion Template
The suggestion template allows you to customize the appearance and behavior of the suggestions displayed above the message box of the Chat. You can 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.
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 using a custom message box template you must implement message submission logic programmatically using the Chat component's API methods to handle user interactions and send messages to the chat.
To implement a custom message box template, nest an <ng-template> tag with the ChatMessageBoxTemplateDirective directive inside the <kendo-chat> tag.
The following example demonstrates the message box template of the Chat in action.
No Data Template
The template allows you to customize the Chat appearance in case of no messages. You can use this template to create visually appealing and informative messages that match your application's design.
To implement a custom no data template, nest an <ng-template> tag with the NoDataChatTemplate directive inside the <kendo-chat> tag.
The following example demonstrates the no data template of the Chat in action.
Displaying Markdown Content
The following example demonstrates how to render Markdown by utilizing the marked library.