Message Privately

Launch a direct 1:1 chat from a group member profile in CometChat Angular UIKit.

AI Integration Quick Reference

Field	Value
Package	@cometchat/chat-uikit-angular
Key components	cometchat-group-members, cometchat-message-list, cometchat-message-composer, cometchat-message-header
Init	CometChatUIKit.init(uiKitSettings) then CometChatUIKit.login("UID")
Purpose	Launch a direct 1:1 chat from a group member profile
Sample app	GitHub
Related	All 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 / Selector	Role
cometchat-message-list	Emits the built-in “Message Privately” action via (messagePrivatelyClick) and displays private conversation messages
cometchat-message-header	Header showing private chat information
cometchat-message-composer	Input component for composing private messages
cometchat-group-members	Optional 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

Feature	Component / Method	Description
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 initiation	startPrivateChat()	Saves group context and opens 1:1 chat
Private chat interface	cometchat-message-header, cometchat-message-list, cometchat-message-composer	Full 1:1 chat view with [user] binding
Context preservation	previousGroup property	Stores the group to return to
Return to group	returnToGroup()	Restores group context and closes private chat
Cleanup	ngOnDestroy	Clears 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.