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
For scenarios requiring complete control over the message composition experience, you can replace the default message box entirely with a custom template. This is particularly useful when you need to:
- Integrate third-party editors like WYSIWYG editors or code editors
- Create specialized input forms for structured data entry (like surveys or order forms)
- Add emoji pickers or other interactive elements
To implement a custom message box template, nest an <ng-template> tag with the ChatMessageBoxTemplateDirective directive inside the <kendo-chat> tag.
When using a custom message box template, you must handle message sending programmatically through the Chat component's API, as the default send behavior is bypassed.
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 Templates
To customize the display of attachments, you can define an AttachmentTemplate. This allows you to create custom layouts and styling for different types of attachments.
<kendo-chat [messages]="messages">
<ng-template kendoChatAttachmentTemplate let-attachment="attachment" let-message="message">
<div class="k-card k-chat-attachment">
<div class="k-card-header">
<h5 class="k-card-title">{{ attachment.name }}</h5>
</div>
<div class="k-card-body">
<img *ngIf="isImage(attachment)" [src]="attachment.url" class="k-card-img" />
<p class="k-card-text">{{ attachment.description }}</p>
</div>
<div class="k-card-actions">
<button kendoButton (click)="downloadAttachment(attachment)">Download</button>
</div>
</div>
</ng-template>
</kendo-chat>Displaying Markdown Content
The following example demonstrates how to render Markdown by utilizing the marked library.