uikit-library-ang v0.3.11
CometChat Angular UI Kit
CometChat Angular UI Kit is a collection of custom UI Components designed to build text chat and voice/video calling features in your application.
The UI Kit is developed to keep developers in mind and aims to reduce development efforts significantly.
Features
- Private(1-1) & Group Conversations
- Rich Media Attachments
- Typing Indicators
- Text, Media and Custom messages
- Read receipts
- Online Presence Indicators
- Message History
- Users & Friends List
- Search by users and groups
- Groups List
- Conversations List
Extensions
Thumbnail Generation | Link Preview | Smart Replies | Polls | Reactions | Stickers
Prerequisites
Before you begin, ensure you have met the following requirements:
A text editor, to write code in. This could be a text editor (e.g. Visual Studio Code, Notepad++, Sublime Text, Atom, or VIM)
Angular CLI
npm install -g @angular/cli
Installing Angular UI Kit
1. Setup
i. Register on CometChat 🔧
To install Angular UI Kit, you need to first register on CometChat Dashboard. Click here to sign up
ii. Get your Application Keys :key:
- Create a new app
- Head over to the Quick Start or API & Auth Keys section and note the
App ID
,Auth Key
, andRegion
.
iii. Add the CometChat Dependency
npm install @cometchat-pro/chat@3.0.10 --save
2. Configure CometChat inside your app
i. Import CometChat SDK
import { CometChat } from "@cometchat-pro/chat";
ii. Initialize CometChat 🌟
The init()
method initializes the settings required for CometChat.
We suggest calling the init()
method on app startup, preferably in the main.ts
, wrapping the platformBrowserDynamic().bootstrapModule(AppModule)
as shown below.
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.
platformBrowserDynamic()
.bootstrapModule(AppModule)
.catch((err) => console.error(err));
},
(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
andRegion
in the above code.
iii. 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 CometChatAuth Key
in the above code.We have setup 5 users for testing having UIDs:
SUPERHERO1
,SUPERHERO2
,SUPERHERO3
,SUPERHERO4
andSUPERHERO5
.
3. Add UI Kit to your project
- Clone this repository
git clone https://github.com/cometchat-pro/cometchat-pro-angular-ui-kit.git
- Copy the cloned repository into your project src folder.
- Import the Components in the respective module where the component will be used.
4. Launch Cometchat
Using the CometChatConversationsWithMessages
component from the UI Kit, you can launch a fully functional chat application.
In this component Chats and Messages are interlinked and work together to launch a fully functional chat on your website/application.
Import the CometChatConversationsWithMessages in the required module
import { CometChatConversationsWithMessages } from '@cometchat-pro/angular-ui-kit'
<cometchat-conversations-with-messages>
</cometchat-conversations-with-messages>
Checkout our sample app
Visit our Angular sample app repo to run the Angular sample app.
Troubleshooting
To read the full documentation on UI Kit integration visit our Documentation.
Facing any issues while integrating or installing the UI Kit please connect with us via real time support present in CometChat Dashboard.
Contributors
Thanks to the following people who have contributed to this project:
👨💻 @priyadarshininadar 👨💻 @ajaygajra
Contact :mailbox:
Contact us via real time support present in CometChat Dashboard.
License
This project uses the following license.
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago