Group Chat - CometChat Docs

AI Integration Quick Reference

Field	Value
Package	`@cometchat/chat-uikit-angular`
Key components	`cometchat-groups`, `cometchat-group-members`
Init	`CometChatUIKit.init(uiKitSettings)` then `CometChatUIKit.login("UID")`
Features	Create public/private/password-protected groups, manage members, roles, ownership transfer
Sample app	GitHub
Related	All Guides

This guide covers the full group lifecycle: creating groups, joining them, managing members, changing roles, and transferring ownership. Before starting, complete the Integration Guide.

Components

Component / Selector	Role
`cometchat-groups`	Displays and manages group lists
`cometchat-group-members`	Displays and manages group member lists

The components below (cometchat-create-group, cometchat-add-members, cometchat-banned-members, cometchat-transfer-ownership) are provided in the sample app, not in the @cometchat/chat-uikit-angular package. Use them as reference implementations or build your own using the CometChat SDK methods shown in this guide.

Sample App Component	Role
`cometchat-create-group`	Creates new groups with different types and settings
`cometchat-add-members`	Adds new members to existing groups
`cometchat-banned-members`	Manages banned members and unban operations
`cometchat-transfer-ownership`	Transfers group ownership to other members

Implementation Steps

1. Create Group

Build a component that collects a group name, type, and optional password. On submit, generate a unique GUID, call CometChat.createGroup(), and emit the event so the rest of the UI updates.

import { Component, Output, EventEmitter } from '@angular/core';
import { CometChat } from '@cometchat/chat-sdk-javascript';
import { CometChatGroupEvents } from '@cometchat/chat-uikit-angular';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-create-group',
  standalone: true,
  imports: [FormsModule],
  template: `
    <form (ngSubmit)="handleSubmit()">
      <input [(ngModel)]="groupName" name="name" placeholder="Group name" />
      <select [(ngModel)]="groupType" name="type">
        <option value="public">Public</option>
        <option value="private">Private</option>
        <option value="password">Password Protected</option>
      </select>
      @if (groupType === 'password') {
        <input [(ngModel)]="groupPassword" name="password" type="password" placeholder="Password" />
      }
      <button type="submit">Create</button>
    </form>
  `
})
export class CreateGroupComponent {
  @Output() groupCreated = new EventEmitter<CometChat.Group>();

  groupName = '';
  groupType = 'public';
  groupPassword = '';

  async handleSubmit(): Promise<void> {
    const guid = `group_${Date.now()}`;
    const group = new CometChat.Group(guid, this.groupName, this.groupType as CometChat.GroupType);
    if (this.groupType === CometChat.GROUP_TYPE.PASSWORD && this.groupPassword) {
      group.setPassword(this.groupPassword);
    }

    try {
      const created = await CometChat.createGroup(group);
      CometChatGroupEvents.ccGroupCreated.next(created);
      this.groupCreated.emit(created);
    } catch (error) {
      console.error('Group creation failed:', error);
    }
  }
}

2. Join Group

Handle joining for both public and password-protected groups. On success, emit ccGroupMemberJoined to update the member list across the app.

import { Component, Input, Output, EventEmitter } from '@angular/core';
import { CometChat } from '@cometchat/chat-sdk-javascript';
import {
  CometChatGroupEvents
} from '@cometchat/chat-uikit-angular';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-join-group',
  standalone: true,
  imports: [FormsModule],
  template: `
    @if (group.getType() === 'password') {
      <input [(ngModel)]="password" placeholder="Enter password" type="password" />
    }
    <button (click)="joinGroup()">Join Group</button>
    @if (error) {
      <p class="error">Failed to join group. Check the password.</p>
    }
  `
})
export class JoinGroupComponent {
  @Input() group!: CometChat.Group;
  @Output() groupJoined = new EventEmitter<CometChat.Group>();

  password = '';
  error = false;

  async joinGroup(): Promise<void> {
    try {
      const joinedGroup = await CometChat.joinGroup(
        this.group.getGuid(),
        this.group.getType() as CometChat.GroupType,
        this.password ?? ''
      );
      const loggedInUser = await CometChat.getLoggedinUser();
      if (loggedInUser) {
        CometChatGroupEvents.ccGroupMemberJoined.next({
          joinedGroup,
          joinedUser: loggedInUser,
        });
      }
      this.groupJoined.emit(joinedGroup);
    } catch {
      this.error = true;
    }
  }
}

Private groups cannot be joined with joinGroup. They require an invitation or an admin to add the member.

3. View Group Members

Render the member list for a group using cometchat-group-members. Pass (itemClick) to handle member selection.

<cometchat-group-members
  [group]="selectedGroup"
  (itemClick)="onMemberClick($event)">
</cometchat-group-members>

onMemberClick(member: CometChat.GroupMember): void {
  console.log('Selected member:', member.getName());
}

4. Add Members

cometchat-add-members is a sample-app reference component driven by ChatStateService.activeGroup. It has no [group] input and no (addMembersClick) output — it reads the active group from the state service. Use CometChat.addMembersToGroup() to build your own add-members UI.

Let admins select users and add them to the group.

<cometchat-add-members></cometchat-add-members>

When you add members with a raw SDK call, emit the ccGroupMemberAdded UI Kit event so the rest of the UI stays in sync. Raw SDK calls alone will not produce UI Kit action-message synchronization.

onMembersAdded(
  members: CometChat.User[],
  addedGroupMembers: CometChat.GroupMember[],
  group: CometChat.Group
): void {
  const loggedInUser = CometChatUIKit.getLoggedInUser();
  if (!loggedInUser) return;
  CometChatGroupEvents.ccGroupMemberAdded.next({
    messages: [],
    usersAdded: members,
    userAddedIn: group,
    userAddedBy: loggedInUser,
  });
}

5. Ban Members

cometchat-banned-members is a sample-app component. Use CometChat.banGroupMember() and CometChat.unbanGroupMember() to build your own banned-members UI.

Display banned members and provide unban functionality for group admins.

<cometchat-banned-members
  [group]="selectedGroup">
</cometchat-banned-members>

6. Change Member Scope

Promote or demote a member by calling CometChat.updateGroupMemberScope(). Emit ccGroupMemberScopeChanged so the UI reflects the role change.

import { CometChat } from '@cometchat/chat-sdk-javascript';
import {
  CometChatGroupEvents
} from '@cometchat/chat-uikit-angular';

async changeMemberScope(
  member: CometChat.GroupMember,
  newScope: string,
  group: CometChat.Group
): Promise<void> {
  try {
    const oldScope = member.getScope();
    const message = await CometChat.updateGroupMemberScope(
      group.getGuid(),
      member.getUid(),
      newScope
    );

    CometChatGroupEvents.ccGroupMemberScopeChanged.next({
      message,
      updatedUser: member,
      scopeChangedTo: newScope,
      scopeChangedFrom: oldScope,
      group
    });
  } catch (error) {
    console.error('Failed to update member scope:', error);
  }
}

The ccGroupMemberScopeChanged payload uses the Angular UI Kit event shape { message, updatedUser, scopeChangedTo, scopeChangedFrom, group }. The message is the group action message for the scope change, and the actor is read from the message via message.getActionBy() — there is no top-level changedBy field.

7. Transfer Ownership

cometchat-transfer-ownership is a sample-app reference component driven by ChatStateService.activeGroup. It exposes only a (closeClick) output — there is no [group] input or (transferOwnershipClick) output. Use CometChat.transferGroupOwnership() to build your own transfer-ownership UI.

Let the current owner select a member and transfer ownership.

<cometchat-transfer-ownership (closeClick)="onClose()"></cometchat-transfer-ownership>

onClose(): void {
  console.log('Transfer ownership dialog closed');
}

Feature Matrix

Feature	Component / Method	Description
Create group	`CometChat.createGroup()`	SDK method for creating public/private/password groups
Join group	`CometChat.joinGroup()`	Joins public or password-protected groups
View members	`cometchat-group-members`	Displays member list with role indicators
Add members	`CometChat.addMembersToGroup()`	SDK method for batch adding members
Ban members	`CometChat.banGroupMember()`	SDK method for banning group members
Change scope	`CometChat.updateGroupMemberScope()`	Promote/demote member roles
Transfer ownership	`CometChat.transferGroupOwnership()`	Transfer owner role to another member
Group events	`CometChatGroupEvents`	RxJS subjects for group lifecycle events

Next Steps

Groups

Display and manage group lists.

Group Members

Display and manage group member lists.

All Guides

Browse all feature and formatter guides.

Sample App

Full working sample application on GitHub.

​Components

​Implementation Steps

​1. Create Group

​2. Join Group

​3. View Group Members

​4. Add Members

​5. Ban Members

​6. Change Member Scope

​7. Transfer Ownership

​Feature Matrix

​Next Steps

Groups

Group Members

All Guides

Sample App

Components

Implementation Steps

1. Create Group

2. Join Group

3. View Group Members

4. Add Members

5. Ban Members

6. Change Member Scope

7. Transfer Ownership

Feature Matrix

Next Steps