Group Chat

Implement group management including create, join, members, roles, and ownership transfer in CometChat Angular UIKit.

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.