AttachmentTemplateDirective

Defines a template that will be used for displaying message attachments. To define an attachment
template, nest an <ng-template> tag with the kendoChatAttachmentTemplate attribute inside the
<kendo-chat> component. The template context is set to the attachment instance. For more information,
refer to the article on message attachments.

import { Component } from '@angular/core';
import { Message, User, Attachment } from '@progress/kendo-angular-conversational-ui';

const attachments: Attachment[] = [{
  content: 'Attachment One'
}, {
  content: 'Attachment Two'
}];

@Component({
  selector: 'my-app',
  template: `
    <kendo-chat [messages]="messages" [user]="user">
      <ng-template kendoChatAttachmentTemplate let-attachment>
        <div class="k-card">
          The attachment content is "{{ attachment.content }}"
        </div>
      </ng-template>
    </kendo-chat>
  `
})
export class AppComponent {
  public readonly user: User = {
    id: 1
  };

  public readonly bot: User = {
    id: 0
  };

  public messages: Message[] = [{
    author: this.bot,
    text: 'A message with attachments',
    attachments: attachments
  }];
}
import { NgModule } from '@angular/core';
import { Component } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ChatModule } from '@progress/kendo-angular-conversational-ui';

import { AppComponent } from './app.component';

@NgModule({
  imports:      [ BrowserModule, BrowserAnimationsModule, ChatModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})

export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Selector

[kendoChatAttachmentTemplate]