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, 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(), this.password
      );
      const loggedInUser = await CometChat.getLoggedinUser();
      CometChatGroupEvents.ccGroupMemberJoined.next({
        joinedGroup,
        joinedUser: loggedInUser
      });
      this.groupJoined.emit(joinedGroup);
    } catch {
      this.error = true;
    }
  }
}

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 component. Use CometChat.addMembersToGroup() to build your own add-members UI.

Let admins select users and add them to the group.

<cometchat-add-members
  [group]="selectedGroup"
  (addMembersClick)="onMembersAdded($event)">
</cometchat-add-members>

onMembersAdded(members: CometChat.User[]): void {
  console.log('Added members:', members.length);
}

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 {
    await CometChat.updateGroupMemberScope(
      member.getUid(),
      newScope,
      group.getGuid()
    );

    const loggedInUser = await CometChat.getLoggedinUser();
    CometChatGroupEvents.ccGroupMemberScopeChanged.next({
      changedBy: loggedInUser!,
      changedUser: member,
      changedIn: group,
      newScope,
      oldScope: member.getScope()
    });
  } catch (error) {
    console.error('Failed to update member scope:', error);
  }
}

7. Transfer Ownership

cometchat-transfer-ownership is a sample-app component. Use CometChat.transferGroupOwnership() to build your own transfer-ownership UI.

Let the current owner select a member and transfer ownership.

<cometchat-transfer-ownership
  [group]="selectedGroup"
  (transferOwnershipClick)="onOwnershipTransferred($event)">
</cometchat-transfer-ownership>

onOwnershipTransferred(newOwner: CometChat.GroupMember): void {
  console.log('Ownership transferred to:', newOwner.getName());
}

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