Overview

<cometchat-message-list
  [user]="chatUser"
  (threadRepliesClick)="onThreadRepliesClick($event)"
  (error)="onError($event)">
</cometchat-message-list>

import { CometChatMessageEvents } from '@cometchat/chat-uikit-angular';
import { Subscription } from 'rxjs';

// Subscribe in ngOnInit
this.subscription = CometChatMessageEvents.ccMessageSent.subscribe((message) => {
  // react to sent message
});

// Cleanup in ngOnDestroy
this.subscription?.unsubscribe();

<cometchat-message-list
  [user]="chatUser"
  [messagesRequestBuilder]="messagesRequestBuilder">
</cometchat-message-list>

this.messagesRequestBuilder = new CometChat.MessagesRequestBuilder().setLimit(20);

<cometchat-message-header
  [user]="chatUser"
  [titleView]="customTitle"
  [subtitleView]="customSubtitle"
  [leadingView]="customAvatar">
</cometchat-message-header>

<ng-template #customTitle let-user>
  <span>{{ user.getName() }}</span>
</ng-template>

<ng-template #customSubtitle let-user>
  <span>Custom subtitle</span>
</ng-template>

<ng-template #customAvatar let-user>
  <img [src]="user.getAvatar()" alt="avatar" />
</ng-template>

.cometchat .cometchat-message-list .cometchat-text-bubble__body-text {
  font-family: "SF Pro";
}