Skip to main content
FieldValue
Package@cometchat/chat-uikit-angular
Key componentscometchat-group-members, cometchat-message-list, cometchat-message-composer, cometchat-message-header
InitCometChatUIKit.init(uiKitSettings) then CometChatUIKit.login("UID")
PurposeLaunch a direct 1:1 chat from a group member profile
Sample appGitHub
RelatedAll Guides
Message Privately lets users start a direct 1:1 conversation with another group member without leaving the group context. Selecting it opens a normal 1:1 user chat — the resulting conversation is not group-scoped. The user can return to the group after the private chat. cometchat-message-list provides this as a built-in action. The “Message Privately” option appears only in group chats, and only for messages sent by other users. It is controlled by the hideMessagePrivatelyOption property, which defaults to false, so the action is shown by default. When a user selects it, the (messagePrivatelyClick) output emits the target message and user. Before starting, complete the Integration Guide.

​
Components

Component / SelectorRole
cometchat-message-listEmits the built-in “Message Privately” action via (messagePrivatelyClick) and displays private conversation messages
cometchat-message-headerHeader showing private chat information
cometchat-message-composerInput component for composing private messages
cometchat-group-membersOptional alternative entry point: start a private chat from the member list

​
Implementation Steps

​
1. Handle the Built-in “Message Privately” Action (Canonical)

The canonical way to launch a private chat is the built-in action on cometchat-message-list. Bind the (messagePrivatelyClick) output to open a 1:1 chat with the emitted user. 
<cometchat-message-list
  (messagePrivatelyClick)="openPrivateChat($event)">
</cometchat-message-list>

openPrivateChat(event: { message: CometChat.BaseMessage; user: CometChat.User }) {
  this.privateChatUser = event.user;
}
Notes:
  • hideMessagePrivatelyOption defaults to false, so the action is shown by default. Set it to true to hide the option.
  • The action appears only in group chats, and only for messages sent by other users.
  • Selecting it opens a normal 1:1 user chat — it is not group-scoped.

​
2. Alternative: Group Member Click Handler

As a secondary route, you can also start a private chat from the group member list. When a group member is clicked, cast them to a User object and initiate a private chat. Save the current group so the user can return to it later. 
import { Component, OnDestroy } from '@angular/core';
import { CometChat } from '@cometchat/chat-sdk-javascript';
import { CometChatUIKitConstants } from '@cometchat/chat-uikit-angular';

@Component({
  selector: 'app-private-chat',
  standalone: true,
  imports: [],
  template: `<!-- see steps below -->`
})
export class PrivateChatComponent implements OnDestroy {
  currentGroup: CometChat.Group | undefined;
  previousGroup: CometChat.Group | undefined;
  privateChatUser: CometChat.User | undefined;
  showPrivateChat = false;

  onGroupMemberClick(member: CometChat.GroupMember): void {
    const user = member as unknown as CometChat.User;
    this.startPrivateChat(user, this.currentGroup!);
  }

  startPrivateChat(user: CometChat.User, fromGroup: CometChat.Group): void {
    this.previousGroup = fromGroup;
    this.privateChatUser = user;
    this.showPrivateChat = true;
  }

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

​
3. Alternative: Group Members with Private Messaging Option

For the group-members route, render cometchat-group-members and handle the (itemClick) output to trigger the private chat flow. 
<cometchat-group-members
  [group]="currentGroup"
  (itemClick)="onGroupMemberClick($event)">
</cometchat-group-members>

​
4. Private Chat Interface

Render a full chat view (header, message list, composer) for the 1:1 conversation. The header includes a back button that returns the user to the original group. 
@if (showPrivateChat && privateChatUser) {
  <div class="cometchat-private-chat">
    <cometchat-message-header
      [user]="privateChatUser"
      (backClick)="returnToGroup()">
    </cometchat-message-header>

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

    <cometchat-message-composer
      [user]="privateChatUser">
    </cometchat-message-composer>
  </div>
}

​
5. Return to Group

When the user clicks back, restore the previous group context and close the private chat view. 
returnToGroup(): void {
  if (this.previousGroup) {
    this.currentGroup = this.previousGroup;
    this.previousGroup = undefined;
  }
  this.privateChatUser = undefined;
  this.showPrivateChat = false;
}

​
6. Full Component Example

A complete standalone component wiring group members, private chat, and navigation together. 
import { Component, Input, OnDestroy } from '@angular/core';
import { CometChat } from '@cometchat/chat-sdk-javascript';
import {
  CometChatGroupMembersComponent,
  CometChatMessageHeaderComponent,
  CometChatMessageListComponent,
  CometChatMessageComposerComponent
} from '@cometchat/chat-uikit-angular';

@Component({
  selector: 'app-group-with-private-chat',
  standalone: true,
  imports: [
    CometChatGroupMembersComponent,
    CometChatMessageHeaderComponent,
    CometChatMessageListComponent,
    CometChatMessageComposerComponent
  ],
  template: `
    @if (showPrivateChat && privateChatUser) {
      <div class="cometchat-private-chat">
        <cometchat-message-header
          [user]="privateChatUser"
          (backClick)="returnToGroup()">
        </cometchat-message-header>

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

        <cometchat-message-composer
          [user]="privateChatUser">
        </cometchat-message-composer>
      </div>
    } @else {
      <cometchat-group-members
        [group]="group"
        (itemClick)="onGroupMemberClick($event)">
      </cometchat-group-members>
    }
  `
})
export class GroupWithPrivateChatComponent implements OnDestroy {
  @Input() group!: CometChat.Group;

  previousGroup: CometChat.Group | undefined;
  privateChatUser: CometChat.User | undefined;
  showPrivateChat = false;

  onGroupMemberClick(member: CometChat.GroupMember): void {
    const user = member as unknown as CometChat.User;
    this.previousGroup = this.group;
    this.privateChatUser = user;
    this.showPrivateChat = true;
  }

  returnToGroup(): void {
    this.privateChatUser = undefined;
    this.showPrivateChat = false;
  }

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

​
Feature Matrix

FeatureComponent / MethodDescription
Built-in Message Privately (canonical)cometchat-message-list with (messagePrivatelyClick)Emits the target message and user when the built-in action is selected; shown by default via hideMessagePrivatelyOption (false)
Group member selection (alternative)cometchat-group-members with (itemClick)Triggers private chat from member list
Private chat initiationstartPrivateChat()Saves group context and opens 1:1 chat
Private chat interfacecometchat-message-header, cometchat-message-list, cometchat-message-composerFull 1:1 chat view with [user] binding
Context preservationpreviousGroup propertyStores the group to return to
Return to groupreturnToGroup()Restores group context and closes private chat
CleanupngOnDestroyClears private chat state on component destroy

​
Next Steps

Group Members

Display and manage group member lists.

Message List

Render real-time message threads.

All Guides

Browse all feature and formatter guides.

Sample App

Full working sample application on GitHub.