Build a Real-Time Chat App in Angular Using CometChat UI Kit

Building an Angular chat app from scratch is more complex than it looks. Behind what seems like a simple message exchange lies a set of serious engineering challenges:

CometChat's Angular UI Kit handles all of that complexity with pre-built, customizable Angular components, so you can integrate full-featured, real-time chat without building the infrastructure yourself.

Why use CometChat instead of building it yourself?

To better understand how CometChat can accelerate your development process, here's a quick comparison of building a chat app using the traditional DIY approach versus leveraging CometChat:

In this tutorial, you’ll learn how to integrate the CometChat UI Kit into an Angular application to build a production-ready chat experience without introducing additional state management libraries or building real-time systems from scratch.

What You’ll Build

By the end of this tutorial you'll have an Angular app that supports:

Prerequisites

Before starting, make sure you have:

Getting Started

The following steps take you from an empty project to a working Angular chat app. Follow them in order, each step builds on the last.

Step 1: Create a New Angular Application

Use Angular CLI to scaffold a new project. This gives you a clean starting point with the structure CometChat integrates into cleanly.

Run the app to confirm everything is working before adding any dependencies:

Open the localhost in your browser. You should see the default Angular welcome page. Once confirmed, stop the server and move to the next step.

Step 2: Create a CometChat App and Collect Your Credentials

Every CometChat integration is tied to a CometChat app. You'll create one now and collect the three values you'll need throughout this tutorial.

Important: Keep your Auth Key secure. It grants full access to your CometChat app. Never commit it to version control or expose it in client-side code for production deployments.

Step 3: Install the CometChat Angular UI Kit

Install the Angular UI Kit package. This also pulls in the underlying CometChat JS Chat SDK as a dependency.

If you're using npm version 3 through 6, you'll also need to install the peer dependencies manually:

npm 7 and above handles peer dependencies automatically , if you're on a recent version, the single install command above is all you need.

Step 4: Register UI Kit Assets in angular.json

The UI Kit ships with static assets (icons, notification sounds, and other resources). You need to register them in Angular's build config so they're copied into your output bundle.

Open angular.json and find the assets array under your build configuration. Add the following entry:

Without this step, UI Kit components that depend on bundled assets (such as icons and sounds) won't load correctly at runtime.

Step 5: Initialize CometChat at App Startup

Initialize the UI Kit once at app startup (commonly in main.ts or in a dedicated init service that runs before mounting the UI).

You need to initialize the UI kit once before your app mounts any chat UI. The right place for this is your main.ts file (or a dedicated initialization service that runs on app bootstrap).

Add the following to main.ts:

Important: Replace YOUR_APP_ID, YOUR_REGION, and YOUR_AUTH_KEY with the values from your CometChat Dashboard.

.subscribePresenceForAllUsers() enables real-time online/offline presence indicators across your app. If you only need presence for a subset of users, the UI Kit offers more granular subscription options in the documentation.

Step 6: Authenticate a User

Before any chat UI can render, a user must be logged in to CometChat. The UI Kit provides a login method that accepts a User ID — the same UID you've assigned to this user in your CometChat app.

You can create users via the CometChat Dashboard, the REST API, or use the pre-seeded test users available in CometChat sample environments. Add the following login logic wherever you handle auth in your Angular app (e.g., a login component or auth service):

getLoggedinUser() checks whether a CometChat session is already active — this prevents unnecessary re-authentication if the user refreshes the page or navigates back to the chat view.

Important: For production apps, replace Auth Key-based login with Auth Token-based login.

Step 7: Render Conversations and Messages

With initialization and auth in place, you're ready to render the chat UI. The Angular UI Kit's CometChatConversationsWithMessages component is the fastest path to a working chat experience — it shows the conversations list on the left and opens the full message thread when a conversation is selected.

First, import the component module in your app module (app.module.ts):

Then add the component tag to your template (app.component.html):

This single component gives you:

Run the app (ng serve) and log in with a test user. You should see the conversations panel load immediately.

Step 8: Add Group Chat

The UI Kit includes group-specific components that slot into your existing Angular routing setup. A common pattern is to add a "Create Group" route that lets users start a new group, then redirect to the ConversationsWithMessages view with the group pre-selected.

Refer to the Angular UI Kit component documentation for the specific module imports and template tags for group creation, group listing, and group member management — the pattern is consistent with how you imported CometChatConversationsWithMessages above.

Step 9: Customize and Theme the UI

The Angular UI Kit is built to fit inside your existing app design, not the other way around. You have three levels of customization available:

Start with global CSS variable overrides to match your color palette, then move to component-level inputs if you need finer control over specific screens.

Step 10: Verify the Integration End-to-End

Start the app and work through this checklist to confirm everything is wired up correctly:

If initialization fails, double-check that your App ID, Region, and Auth Key in Step 5 exactly match the values in your CometChat Dashboard.

Optional Enhancements

Once the core chat flow is working, you can extend it incrementally without rearchitecting anything:

Angular Sample App by CometChat

The Angular sample app is a fully functional reference implementation that showcases the complete CometChat feature set, including components and flows this tutorial doesn't cover in detail. It's a practical way to explore group management, custom themes, and advanced AI messaging features from the CometChat Dashboard behaviors before building them into your own app.

Prerequisites

• Node.js and npm installed

• A CometChat account with an App ID, Region, and Auth Key

Installation

Clone the sample app repository:

Navigate to the cloned directory:

Install dependencies:

Enter your CometChat App ID, Region, and Auth Key in the AppConstants.ts file:

Run the project locally to see all CometChat features in action:

If you’ve made it this far, you now have a clear picture of how real-time chat fits into an Angular app without adding extra complexity to your existing structure. The Angular sample app gives you something concrete to explore so you can see how conversations, updates, and UI components work together in practice.

For issues running the project or integrating with our UI Kits, consult our documentation or create a support ticket or seek real-time support via the CometChat Dashboard.

Frequently Asked Questions (FAQ)

How long does it take to build an Angular chat app with CometChat?

With the CometChat Angular UI Kit, you can have a fully functional chat app running in under an hour. This includes project setup, installation, initialization, authentication, and rendering the conversations UI.

How much does it cost to build an Angular chat app with CometChat?

CometChat offers a free plan that supports up to 25 users, which is more than enough to build and test your integration. Paid plans scale based on your Monthly Active Users (MAUs). See the pricing page for current plan details.

Can I customize the appearance of the chat UI in my Angular app?

Yes. The Angular UI Kit is designed for customization. You can override CSS variables and classes in your global styles.scss to match your design system, configure individual components via Angular inputs, and control which features (presence, receipts, reactions) are enabled per component.

Is a CometChat-powered Angular chat app scalable?

CometChat handles scaling automatically. The infrastructure supports millions of concurrent users with elastic scaling, there's no configuration required on your end as your user base grows.

Can I add voice and video calling to my Angular chat app?

Yes. CometChat supports voice and video calling via the CometChat Calls SDK, which integrates alongside the UI Kit. Calling can be enabled with a few additional lines of configuration once your base chat integration is working.

Does the Angular UI Kit work with Angular standalone components (no NgModule)?

Yes. CometChat's Angular UI Kit components can be used with the standalone component architecture introduced in Angular 14+. Instead of importing via NgModule, import the component directly in your standalone component's imports array. Check the Angular UI Kit documentation for the exact import paths.

How do I handle message history in my Angular chat app?

CometChat persists all message history on its servers and syncs it automatically when a conversation is opened. The UI Kit's Messages component handles pagination and historical message loading out of the box, no additional configuration is needed for basic history retrieval.

Shrinithi Vijayaraghavan

Creative Storytelling , CometChat

Shrinithi is a creative storyteller at CometChat who loves integrating technology and writing and sharing stories with the world. Shrinithi is excited to explore the endless possibilities of technology and storytelling combined together that can captivate and intrigue the audience.