The CometChat Angular UI Kit is developed to keep developers in mind and aims to reduce development efforts significantly.

👍

Improvisations in V3.0

Faster connection & response times
Higher rate limits
Supports up to 100K users in a group
Unlimited groups
Support for Transient Messages
Real-time user & group members count
And more!

The UI Kit’s customizable UI components simplify the process of integrating text chat and voice/video calling features to your website or mobile application in a few minutes.

Installation Steps

Prerequisites

Before you begin, ensure you have met the following requirements:

1. A text editor. (e.g. Visual Studio Code, Notepad++, Sublime Text, Atom, or VIM)

2. Node

3. npm

4. Angular CLI

npm install -g @angular/cli

Installing Angular UI Kit

Setup 🔧

• To install the Angular UI Kit, you need to first register on the CometChat Dashboard. Click here to sign up (https://app.cometchat.com)

1. Get Your Application Keys 🔑

• Create a new app

🚧

Important

Please follow the steps provided in the Key concepts guide to create V3 apps before you proceed

• Head over to the QuickStart or API & Auth Keys section and note the App ID, Auth Key, and Region.

2. Add the CometChat Dependency

npm install @cometchat-pro/[email protected] --save

Configure CometChat inside your app

1. Import CometChat SDK

import { CometChat } from "@cometchat-pro/chat";

2. Initialize CometChat 🌟
   The init() method initializes the settings required for CometChat. We suggest calling the init() method on app startup, preferably in the onCreate() method of the Application class

const appID = "APP_ID";
const region = "REGION";
const appSetting = new CometChat.AppSettingsBuilder()
  .subscribePresenceForAllUsers()
  .setRegion(region)
  .build();
CometChat.init(appID, appSetting).then(
  () => {
    console.log("Initialization completed successfully");
    // You can now call login function.
  },
  (error) => {
    console.log("Initialization failed with error:", error);
    // Check the reason for error and take appropriate action.
  }
);

🚧

Note

Replace APP_ID and REGION with your CometChat App ID and Region in the above code

3. Login your user 👤
   This method takes UID and Auth Key as input parameters and returns the User object containing all the information of the logged-in user

const authKey = "AUTH_KEY";
const uid = "SUPERHERO1";

CometChat.login(uid, authKey).then(
  (user) => {
    console.log("Login Successful:", { user });
  },
  (error) => {
    console.log("Login failed with exception:", { error });
  }
);

📘

Note

• Replace AUTH_KEY with your CometChat Auth Key in the above code
• We have set up 5 users for testing having UIDs: SUPERHERO1, SUPERHERO2, SUPERHERO3, SUPERHERO4, and SUPERHERO5.

Add UI Kit to your project

1. Clone the repository

git clone https://github.com/cometchat-team/cometchat-pro-angular-ui-kit.git -b v3

2. Copy the cloned repository into your project src folder.

3. Import the Components in the respective module where the component will be used.
4. Install @ctrl/ngx-emoji-mart according to the angular version of your project @ctrl/ngx-emoji-mart
5. Add these styles to your angular.json

"styles": [
  "node_modules/@ctrl/ngx-emoji-mart/picker.css",
  "src/cometchat-pro-angular-ui-kit/CometChatWorkspace/projects/angular-chat-ui-kit/src/css/styles.scss"
]

4.Wrap all the selectors in a div with class=responsive as shown in the next step

Launch CometChat

CometChatUI is an option to launch a fully functional chat application using the UI Kit. In UI Kit all the UI Components are interlinked and work together to launch a fully functional chat on your website/application.

Import the CometChatUI in your project file

import { CometChatUI } from "../components/CometChatUI/CometChat/cometchat-ui.module";

#Use this selector in your html file

<div class="responsive">
  <CometChatUI></CometChatUI>
</div>

Checkout our sample app

Visit our Angular sample app repo to run the Angular sample app.