

I want to checkout Angular Chat UI Kit
Follow the steps mentioned in the README.md
file.
Kindly, click on below button to download our Angular Chat UI Kit.
I want to explore the sample app
Kindly, click on below button to download our Angular Chat Sample App.
The UI Kit library is built keeping the developers in mind and aims to considerably reduce the development efforts required to add the chat feature in your website/application.
The UI Kit provides options to seamlessly add chat to your application using the customizable UI components
Installation Steps
Prerequisites
Before you begin, ensure you have met the following requirements:
-
A text editor. (e.g. Visual Studio Code, Notepad++, Sublime Text, Atom, or VIM)
-
Angular CLI
npm install -g @angular/cli
Installing Angular Chat 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)
- Get Your Application Keys 🔑
- Create a new app
- Head over to the QuickStart or API & Auth Keys section and note the App ID, Auth Key, and Region.
- Add the CometChat Dependency
npm install @cometchat-pro/[email protected] --save
Configure CometChat inside your app
- 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
- 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
- Clone the repository
- Copy the angular-chat-ui-kit folder from dist\ folder to your node_modules
Install @ctrl/ngx-emoji-mart according to the angular version of your project @ctrl/ngx-emoji-mart
3.Add these styles to your angular.json
"styles": [
"node_modules/@ctrl/ngx-emoji-mart/picker.css",
"node_modules/angular-chat-ui-kit/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 "angular-chat-ui-kit";
#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.
Updated 9 days ago
What's Next
Explore Customizable UI Components |