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 a group member without leaving the group context. The user can return to the group after the private chat. Before starting, complete the Integration Guide.

​
Components

Component / SelectorRole
cometchat-group-membersDisplays group members with click handlers for private messaging
cometchat-message-headerHeader showing private chat information
cometchat-message-listDisplays private conversation messages
cometchat-message-composerInput component for composing private messages

​
Implementation Steps

​
1. Group Member Click Handler

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;
  }
}

​
2. Group Members with Private Messaging Option

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>

​
3. 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>
}

​
4. 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;
}

​
5. 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
Group member selectioncometchat-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.