Angular Chat Templates
The Chat component provides extensive templating capabilities that allow you to customize every aspect of the chat interface.
You can customize message appearance, create custom headers, modify timestamp displays, design attachment layouts, and even replace the entire message input experience with your own templates.
Message Template
The Chat component provides a message template that allows you to customize the appearance and behavior of individual chat messages.
To customize the message, nest an <ng-template> tag with the MessageTemplateDirective directive inside the <kendo-chat> tag.
The following example customizes the messages, by adding a like/dislike button for each message.
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.
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.
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.
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.
Status Template
The status template allows you to customize the appearance and behavior of the status messages displayed for a 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.
Displaying Markdown Content
The following example demonstrates how to render Markdown by utilizing the marked library.