Skip to main content
Version: v4

Contacts

CometChatContacts is a versatile Angular UI component specifically designed to facilitate the display and management of users and groups within chat applications. It streamlines the process of showcasing all app users and available chat groups in a user-friendly interface, making it easier for users to connect and communicate effectively.

Key Features:

  1. User List View: CometChatContacts presents a comprehensive list of all registered users within the application. This list allows users to quickly find and select specific individuals they wish to interact with.
  2. Group List View: The component also offers a dedicated view to showcase all the available chat groups. This simplifies the process of joining or creating new group conversations.
  3. Smart Search Functionality: Users can utilize the powerful search feature to quickly locate specific users or groups by typing names or keywords. This ensures seamless navigation, even in applications with a large user base.
  4. Selection Mode: CometChatContacts supports a selection mode, enabling users to pick multiple contacts or groups simultaneously. This feature proves useful for creating group chats or forwarding messages to multiple recipients.
  5. Customizable Tab Layout: Developers can easily customize the appearance of the tabs, including text colors, indicator color, and background, to match the app's branding and aesthetics.
  6. Selection Limit Control: Developers have the flexibility to set a selection limit, restricting the number of contacts or groups a user can select during the selection mode. This helps maintain messaging policies and optimize user experience.
  7. User-Friendly Close Button: The component provides a convenient close button feature, allowing users to exit the Contacts view and return to their previous screen or chat interface effortlessly.

How to integrate CometChatContacts

import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CometChatContacts } from '@cometchat/chat-uikit-angular';
import { AppComponent } from './app.component';

@NgModule({
imports: [
BrowserModule,
CometChatContacts
],
declarations: [AppComponent],
providers: [],
bootstrap: [AppComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }
PropertiesTypeDescription
title report StringSets the title that will be displayed at the top of the CometChatContacts view. This property allows you to customize the title to provide relevant information or context to the users.
closeIconURLStringSets the URL for the close icon that will be displayed as the close button in the CometChatContacts view.
contactsStyleContactsStyleSets various style configurations for the CometChatContacts view, including title appearance, font, color, background, border, tab colors, and more.
usersTabTitle report StringSets the title for the Users tab in the CometChatContacts view. This method allows you to customize the title displayed for the Users tab.
tabVisibilityTabsVisibilitySpecifies the visibility of tabs within the CometChatContacts component. This configuration allows you to control which tabs are displayed and which are hidden based on your requirements.tab.
groupsTabTitle report StringSets the title for the Groups tab in the CometChatContacts view. This method allows you to customize the title displayed for the Groups tab.
onItemClick(user?: CometChat.User, group?: CometChat.Group) => voidSets the listener to handle item selection events in the CometChatContacts view. This method allows you to register a callback to be notified when a user or group is selected by the user in the Contacts view.
onSubmitButtonClick((users?: CometChat.User[], groups?: CometChat.Group[]) => void) | undefinedtriggers when user clicks on the submit button of the Contacts component.
hideSubmitIconbooleanused to hide the submit button in CometChatContacts Component. by default it is set as false
onClosevoidRegisters a listener to handle the close event in the CometChatContacts component. This callback function enables you to define custom actions when the Contacts view is closed, such as resource cleanup or UI updates.
onError((error: CometChat.CometChatException) => void)Sets a listener to handle errors within the CometChatContacts component. This callback function, accepting a parameter of type CometChat.CometChatException, allows for custom error-handling logic. If no listener is provided, it can be set to null.
usersConfigurationUsersConfigurationSets the configuration for the Users tab in the CometChatContacts view. This method allows you to customize various aspects of the Users tab, such as search functionality, appearance and more. By passing a valid UsersConfiguration object, you can control how the Users tab behaves and appears to the users.
groupsConfigurationGroupsConfigurationSets the configuration for the Groups tab in the CometChatContacts view. This method allows you to customize various aspects of the Groups tab, such as search functionality, appearance and more. By passing a valid GroupsConfiguration object, you can control how the Groups tab behaves and appears to the users.

ContactsStyle

You can set the contactsStyle to the CometChatContacts Component to customize the styling.

List of properties exposed by ContactsStyle:

NameTypeDescription
widthstringSets the width of the CometChatContacts component.
heightstringSets the height of the CometChatContacts component.
borderstringSets the border style of the CometChatContacts component.
borderRadiusstringSets the border radius of the CometChatContacts component.
backgroundstringSets the background color of the CometChatContacts component.
titleTextFontstringSets the font for the title text of the CometChatContacts component.
titleTextColorstringSets the text color for the title text of the CometChatContacts component.
closeIconTintstringSets the tint color for the close icon of the CometChatContacts component.
tabWidthstringSets the width of the tabs within the CometChatContacts component.
tabHeightstringSets the height of the tabs within the CometChatContacts component.
tabBorderstringSets the border color of the tabs within the CometChatContacts component.
tabBorderRadiusstringSets the border radius of the tabs within the CometChatContacts component.
tabBackgroundstringSets the background color of the tabs within the CometChatContacts component.
tabTitleTextFontstringSets the font for the title text of the tabs within the CometChatContacts component.
tabTitleTextColorstringSets the text color for the title text of the tabs within the CometChatContacts component.
activeTabTitleTextColorstringSets the text color for the active title text of the tabs within the CometChatContacts component.
activeTabTitleTextFontstringSets the font for the active title text of the tabs within the CometChatContacts component.
activeTabBackgroundstringSets the background color for the active tabs within the CometChatContacts component.
activeTabBorderstringSets the border color for the active tabs within the CometChatContacts component.
selectionIconTintstringSets the tint color for the selection icon within the CometChatContacts component.
errorStateTextFontstringSets the font for displaying error messages within the CometChatContacts component.
errorStateTextColorstringSets the text color for displaying error messages within the CometChatContacts component.
boxShadowstringSets the shadow appearance for the CometChatContacts component.
submitButtonBackgroundstringSets the background color of the submit button within the CometChatContacts component.
submitButtonTextColorstringSets the text color of the submit button within the CometChatContacts component.
submitButtonTextFontstringSets the font for the submit button text within the CometChatContacts component.
paddingstringSets the padding for the CometChatContacts component.
 contactsStyle:ConversationsStyle = new ContactsStyle({
width: "100vw",
height: "100vh",
border: "1px solid #ccc",
borderRadius: "8px",
background: "#f0f0f0",
titleTextFont: "14px Arial, sans-serif",
titleTextColor: "#333",
closeIconTint: "blue",
})