Skip to main content
FieldValue
Package@cometchat/chat-uikit-angular
Key componentscometchat-thread-header, cometchat-message-list, cometchat-message-composer
InitCometChatUIKit.init(uiKitSettings) then CometChatUIKit.login("UID")
Entry pointcometchat-message-list threadRepliesClick output opens thread view from group messages
Sample appGitHub
RelatedAll Guides
Threaded messages let users create sub-conversations by replying to specific messages in group chats. This reduces clutter and keeps discussions focused. Before starting, complete the Integration Guide.

​
Components

Component / SelectorRole
cometchat-threaded-messagesMain container for threaded messages
cometchat-thread-headerDisplays parent message and controls
cometchat-message-listShows messages filtered by parentMessageId
cometchat-message-composerInput for composing threaded replies

​
Implementation Steps

​
1. Thread State Management

Create a component that tracks the parent message the user clicked “Reply in Thread” on. When set, show the threaded messages side panel. 
import { Component, OnDestroy } from '@angular/core';
import { CometChat } from '@cometchat/chat-sdk-javascript';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-chat-home',
  standalone: true,
  imports: [],
  template: `<!-- see steps below -->`
})
export class ChatHomeComponent implements OnDestroy {
  threadedMessage: CometChat.BaseMessage | undefined;
  showThreadPanel = false;

  private subscriptions: Subscription[] = [];

  onThreadRepliesClick(message: CometChat.BaseMessage): void {
    this.threadedMessage = message;
    this.showThreadPanel = true;
  }

  closeThread(): void {
    this.threadedMessage = undefined;
    this.showThreadPanel = false;
  }

  ngOnDestroy(): void {
    this.subscriptions.forEach(sub => sub.unsubscribe());
  }
}

​
2. Thread Trigger from Group Messages

Wire the threadRepliesClick output on cometchat-message-list. When a user clicks the thread reply icon on any message, this fires with the parent message object. 
<cometchat-message-list
  [group]="selectedGroup"
  (threadRepliesClick)="onThreadRepliesClick($event)">
</cometchat-message-list>

​
3. Threaded Messages Component

Render the thread panel with the parent message context, reply list filtered by parentMessageId, and a composer scoped to the thread. 
@if (showThreadPanel && threadedMessage) {
  <div class="cometchat-thread-panel">
    <cometchat-thread-header
      [message]="threadedMessage"
      (closeClick)="closeThread()">
    </cometchat-thread-header>

    <cometchat-message-list
      [group]="selectedGroup"
      [parentMessageId]="threadedMessage.getId()">
    </cometchat-message-list>

    <cometchat-message-composer
      [group]="selectedGroup"
      [parentMessageId]="threadedMessage.getId()">
    </cometchat-message-composer>
  </div>
}

​
4. Thread Panel with Blocked Composer Fallback

When the composer is blocked (e.g., permissions), show a fallback message instead. 
@if (showThreadPanel && threadedMessage) {
  <div class="cometchat-thread-panel">
    <cometchat-thread-header
      [message]="threadedMessage"
      (closeClick)="closeThread()">
    </cometchat-thread-header>

    <cometchat-message-list
      [group]="selectedGroup"
      [parentMessageId]="threadedMessage.getId()">
    </cometchat-message-list>

    @if (showComposer) {
      <cometchat-message-composer
        [group]="selectedGroup"
        [parentMessageId]="threadedMessage.getId()">
      </cometchat-message-composer>
    } @else {
      <div class="message-composer-blocked">
        <div class="message-composer-blocked__text">
          Cannot send messages to this group.
          <a>Check permissions</a>
        </div>
      </div>
    }
  </div>
}

​
5. Full Component Example

A complete standalone component wiring thread state, the trigger, and the panel together. 
import { Component, Input, OnDestroy } from '@angular/core';
import { CometChat } from '@cometchat/chat-sdk-javascript';
import {
  CometChatMessageListComponent,
  CometChatMessageComposerComponent,
  CometChatThreadHeaderComponent
} from '@cometchat/chat-uikit-angular';

@Component({
  selector: 'app-threaded-chat',
  standalone: true,
  imports: [
    CometChatMessageListComponent,
    CometChatMessageComposerComponent,
    CometChatThreadHeaderComponent
  ],
  template: `
    <!-- Main message list with thread trigger -->
    <cometchat-message-list
      [group]="group"
      (threadRepliesClick)="onThreadRepliesClick($event)">
    </cometchat-message-list>

    <!-- Thread side panel -->
    @if (showThreadPanel && threadedMessage) {
      <div class="cometchat-thread-panel">
        <cometchat-thread-header
          [message]="threadedMessage"
          (closeClick)="closeThread()">
        </cometchat-thread-header>

        <cometchat-message-list
          [group]="group"
          [parentMessageId]="threadedMessage.getId()">
        </cometchat-message-list>

        <cometchat-message-composer
          [group]="group"
          [parentMessageId]="threadedMessage.getId()">
        </cometchat-message-composer>
      </div>
    }
  `
})
export class ThreadedChatComponent implements OnDestroy {
  @Input() group!: CometChat.Group;

  threadedMessage: CometChat.BaseMessage | undefined;
  showThreadPanel = false;

  onThreadRepliesClick(message: CometChat.BaseMessage): void {
    this.threadedMessage = message;
    this.showThreadPanel = true;
  }

  closeThread(): void {
    this.threadedMessage = undefined;
    this.showThreadPanel = false;
  }

  ngOnDestroy(): void {
    this.threadedMessage = undefined;
  }
}

​
Feature Matrix

FeatureComponent / BindingDescription
Show thread option(threadRepliesClick) on cometchat-message-listFires when user clicks thread reply icon
Display thread messagescometchat-message-list with [parentMessageId]Filters messages to thread replies
Compose replycometchat-message-composer with [parentMessageId]Scopes new messages to the thread
Thread headercometchat-thread-header with [message]Shows parent message context
Close thread(closeClick) on cometchat-thread-headerCloses the thread side panel
Thread stateComponent property threadedMessageTracks the active parent message

​
Next Steps

Message List

Render real-time message threads.

Thread Header

Customize the thread header component.

All Guides

Browse all feature and formatter guides.

Sample App

Full working sample application on GitHub.