MessageTemplateDirective

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

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

@Component({
  selector: 'my-app',
  template: `
    <kendo-chat [messages]="messages" [user]="user">
      <ng-template kendoChatMessageTemplate let-message>
          The message text is "{{ message.text }}"
      </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 sample message'
  }];
}
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

[kendoChatMessageTemplate]