Skip to main content
FieldValue
Package@cometchat/chat-uikit-angular
Key componentscometchat-users, cometchat-groups, cometchat-conversations
InitCometChatUIKit.init(uiKitSettings) then CometChatUIKit.login("UID")
PurposeUnified new chat entry point for starting 1:1 or group conversations
Sample appGitHub
RelatedAll Guides
The New Chat feature lets users start conversations with other users or join group conversations from a single interface. Before starting, complete the Integration Guide.

​
Components

Component / SelectorRole
cometchat-usersDisplays list of available users for 1:1 chat creation
cometchat-groupsShows available groups for joining
cometchat-conversationsNavigation component showing existing conversations

​
Implementation Steps

​
1. New Chat State Management

Track whether the new chat view is visible and which tab (Users or Groups) is active. 
import { Component, Output, EventEmitter } from '@angular/core';
import { CometChat } from '@cometchat/chat-sdk-javascript';
import {
  CometChatUsersComponent,
  CometChatGroupsComponent
} from '@cometchat/chat-uikit-angular';

@Component({
  selector: 'app-new-chat',
  standalone: true,
  imports: [CometChatUsersComponent, CometChatGroupsComponent],
  template: `<!-- see steps below -->`
})
export class NewChatComponent {
  @Output() userSelected = new EventEmitter<CometChat.User>();
  @Output() groupSelected = new EventEmitter<CometChat.Group>();
  @Output() closed = new EventEmitter<void>();

  selectedTab: 'user' | 'group' = 'user';

  selectTab(tab: 'user' | 'group'): void {
    this.selectedTab = tab;
  }

  onUserClick(user: CometChat.User): void {
    this.userSelected.emit(user);
    this.closed.emit();
  }

  onGroupClick(group: CometChat.Group): void {
    this.groupSelected.emit(group);
    this.closed.emit();
  }
}

​
2. New Chat View Template

Render a header with a back button and tabbed navigation between Users and Groups. Selecting a tab switches the list below. 
<div class="cometchat-new-chat-view">
  <div class="cometchat-new-chat-view__header">
    <button (click)="closed.emit()">← Back</button>
    <span class="cometchat-new-chat-view__header-title">New Chat</span>
  </div>

  <div class="cometchat-new-chat-view__tabs">
    <div
      [class.cometchat-new-chat-view__tabs-tab-active]="selectedTab === 'user'"
      (click)="selectTab('user')">
      Users
    </div>
    <div
      [class.cometchat-new-chat-view__tabs-tab-active]="selectedTab === 'group'"
      (click)="selectTab('group')">
      Groups
    </div>
  </div>

  @switch (selectedTab) {
    @case ('user') {
      <cometchat-users
        (itemClick)="onUserClick($event)">
      </cometchat-users>
    }
    @case ('group') {
      <cometchat-groups
        (itemClick)="onGroupClick($event)">
      </cometchat-groups>
    }
  }
</div>

​
3. Integrating New Chat into the Home View

Toggle between the new chat view, the messages view, or an empty state depending on the current app state. 
import { Component } from '@angular/core';
import { CometChat } from '@cometchat/chat-sdk-javascript';
import { ChatStateService } from '@cometchat/chat-uikit-angular';

@Component({
  selector: 'app-chat-home',
  standalone: true,
  imports: [/* NewChatComponent, message components */],
  template: `
    @if (showNewChat) {
      <app-new-chat
        (userSelected)="onUserSelected($event)"
        (groupSelected)="onGroupSelected($event)"
        (closed)="showNewChat = false">
      </app-new-chat>
    } @else if (selectedUser || selectedGroup) {
      <!-- Message view components -->
    } @else {
      <div class="cometchat-empty-state">
        <p>Select a conversation or start a new chat</p>
      </div>
    }
  `
})
export class ChatHomeComponent {
  showNewChat = false;
  selectedUser: CometChat.User | undefined;
  selectedGroup: CometChat.Group | undefined;

  constructor(private chatState: ChatStateService) {}

  openNewChat(): void {
    this.showNewChat = true;
  }

  onUserSelected(user: CometChat.User): void {
    this.selectedUser = user;
    this.selectedGroup = undefined;
    this.chatState.setActiveUser(user);
    this.showNewChat = false;
  }

  onGroupSelected(group: CometChat.Group): void {
    this.selectedGroup = group;
    this.selectedUser = undefined;
    this.chatState.setActiveGroup(group);
    this.showNewChat = false;
  }
}

​
4. Group Joining Logic

Handle the join flow based on group type. Public groups are joined directly. Password-protected groups show a password prompt first. 
import { CometChat } from '@cometchat/chat-sdk-javascript';
import { CometChatUIKitConstants } from '@cometchat/chat-uikit-angular';

joinGroup(group: CometChat.Group): void {
  if (!group.getHasJoined()) {
    if (group.getType() === CometChatUIKitConstants.GroupTypes.public) {
      CometChat.joinGroup(group.getGuid(), group.getType(), '')
        .then((joinedGroup) => {
          this.onGroupSelected(joinedGroup);
        })
        .catch((error) => {
          console.error('Join failed:', error);
        });
    } else {
      // Show password prompt for protected groups
      this.showJoinGroupDialog = true;
      this.pendingGroup = group;
    }
  } else {
    this.onGroupSelected(group);
  }
}

​
Feature Matrix

FeatureComponent / MethodDescription
Open new chat viewshowNewChat flagToggles the new chat interface
User selectioncometchat-users with (itemClick)Lists users for 1:1 chat creation
Group selectioncometchat-groups with (itemClick)Lists groups for joining
Group joiningCometChat.joinGroup()Handles public and password-protected groups
State managementChatStateServiceUpdates active user/group across components
Tab navigationselectedTab propertySwitches between Users and Groups lists

​
Next Steps

Conversations

Display and manage conversation lists.

Groups

Display and manage group lists.

All Guides

Browse all feature and formatter guides.

Sample App

Full working sample application on GitHub.