> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-angular-v5-docs-update.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Message Privately

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

<Accordion title="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](https://github.com/cometchat/cometchat-uikit-angular/tree/v5/projects/sample-app)                    |
  | Related        | [All Guides](/ui-kit/angular/guides/guides-overview)                                                          |
</Accordion>

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](/ui-kit/angular/integration).

***

## 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.

```html theme={null}
<cometchat-message-list
  (messagePrivatelyClick)="openPrivateChat($event)">
</cometchat-message-list>
```

```ts theme={null}
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.

```typescript expandable theme={null}
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.

```html theme={null}
<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.

```html expandable theme={null}
@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.

```typescript theme={null}
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.

```typescript expandable theme={null}
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

<CardGroup cols={2}>
  <Card title="Group Members" href="/ui-kit/angular/components/cometchat-group-members">
    Display and manage group member lists.
  </Card>

  <Card title="Message List" href="/ui-kit/angular/components/cometchat-message-list">
    Render real-time message threads.
  </Card>

  <Card title="All Guides" href="/ui-kit/angular/guides/guides-overview">
    Browse all feature and formatter guides.
  </Card>

  <Card title="Sample App" href="https://github.com/cometchat/cometchat-uikit-angular/tree/v5/projects/sample-app">
    Full working sample application on GitHub.
  </Card>
</CardGroup>