> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-rn-guide-message-privately.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Overview

> Overview of Overview in CometChat.

<Note>
  V4 UI kits offer modular design, extended functionality & customization for a tailored chat experience. Check out our new UIKits [here](/ui-kit/angular/overview).
</Note>

The CometChat Angular Chat UI Kit lets developers easily add an Angular chat app with text, voice & video to your mobile or desktop web applications. Included are fully polished Angular chat UI components and the complete business logic.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/Gp90C5sdVtuRR4t7/images/80f881ed-1623200223-cfa2c1390d0c57b71a4982bc3df870a1.png?fit=max&auto=format&n=Gp90C5sdVtuRR4t7&q=85&s=c8106e001698375b2cc0986591aa68d4" width="1440" height="900" data-path="images/80f881ed-1623200223-cfa2c1390d0c57b71a4982bc3df870a1.png" />
</Frame>

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

#### I want to checkout Angular UI Kit

Follow the steps mentioned in the `README.md` file.

Kindly, click on below button to download our Angular UI Kit.

[Angular UI Kit](https://github.com/cometchat-pro/cometchat-pro-angular-ui-kit/archive/v3.zip)[View on Github](https://github.com/cometchat-pro/cometchat-pro-angular-ui-kit/tree/v3)

#### I want to explore the sample app

Kindly, click on below button to download our Angular Sample App.

[Angular Sample App](https://github.com/cometchat-pro/javascript-angular-chat-app/archive/v3.zip)[View on Github](https://github.com/cometchat-pro/javascript-angular-chat-app/tree/v3)

## Prerequisites

1. A text editor. (e.g. Visual Studio Code, Notepad++, Sublime Text, Atom, or VIM)
2. [Node](https://nodejs.org/en/)
3. [npm](https://www.npmjs.com/get-npm)
4. [Angular CLI](https://angular.io/cli)

<Tabs>
  <Tab title="Bash">
    ```sh theme={null}
    npm install -g @angular/cli
    ```
  </Tab>
</Tabs>

## Installing the Angular Chat UI Kit

<Warning>
  Important

  Please follow the steps provided in the [Key Concepts](/ui-kit/angular/3.0/key-concepts) to create V3 apps before you proceed.
</Warning>

### Setup

1. Register on CometChat a. To install the Angular Chat UI components, you need to first register on the CometChat Dashboard. Click [here](https://app.cometchat.com) to sign up

2. 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.

3. Add the CometChat Dependency

<Tabs>
  <Tab title="CLI">
    ```sh theme={null}
    npm install @cometchat-pro/chat@3.0.6 --save
    ```
  </Tab>
</Tabs>

<Note>
  Please install `postcss` package using the below command if the Angular version of your project is 11.
</Note>

<Tabs>
  <Tab title="CLI">
    ```sh theme={null}
    npm install --save postcss@8.4.27
    ```
  </Tab>
</Tabs>

### Configure CometChat inside your Angular app

* Import CometChat SDK

<Tabs>
  <Tab title="JavaScript">
    ```js theme={null}
    import { CometChat } from "@cometchat-pro/chat";
    ```
  </Tab>
</Tabs>

* Initialize CometChat 🌟

The `init()` method initializes the settings required for CometChat. We suggest calling the `init()` method on app startup, i.e main.ts file of the application.

<Tabs>
  <Tab title="JavaScript">
    ```js theme={null}
    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.
      }
    );
    ```
  </Tab>
</Tabs>

<Warning>
  Replace APP\_ID and REGION with your CometChat App ID and Region in the above code
</Warning>

* Create user

This method takes a `User` object and the `Auth Key` as input parameters and returns the created `User` object if the request is successful.

<Tabs>
  <Tab title="JavaScript">
    ```js theme={null}
    let authKey = "AUTH_KEY";
    var uid = "user1";
    var name = "Kevin";

    var user = new CometChat.User(uid);
    user.setName(name);
    CometChat.createUser(user, authKey).then(
        user => {
            console.log("user created", user);
        },error => {
            console.log("error", error);
        }
    )
    ```
  </Tab>
</Tabs>

<Warning>
  Replace AUTH\_KEY with your CometChat Auth Key in the above code.
</Warning>

* 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

<Tabs>
  <Tab title="JavaScript">
    ```js theme={null}
    const authKey = "AUTH_KEY";
    const uid = "cometchat-uid-1";

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

<Warning>
  Replace AUTH\_KEY with your CometChat Auth Key in the above code.
</Warning>

<Note>
  We have set up 5 users for testing having UIDs: cometchat-uid-1, cometchat-uid-2, cometchat-uid-3, cometchat-uid-4, and cometchat-uid-5.\
  \
  We have used uid cometchat-uid-1 as an example here. You can create a User from CometChat Dashboard as well.
</Note>

### Add the Angular Chat UI components to your project

* Clone the repository

<Tabs>
  <Tab title="CLI">
    ```sh theme={null}
    git clone https://github.com/cometchat-pro/cometchat-pro-angular-ui-kit.git
    ```
  </Tab>
</Tabs>

* Copy the cloned repository into your project src folder.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/le8ibYc8lBJsShSE/images/52cadcd8-1638284257-81ceed6ed42b94663fdf979a5bc2488d.png?fit=max&auto=format&n=le8ibYc8lBJsShSE&q=85&s=b7ee791df3db6e9e4853d013eaaab990" width="285" height="647" data-path="images/52cadcd8-1638284257-81ceed6ed42b94663fdf979a5bc2488d.png" />
</Frame>

* Import the Components in the respective module where the component will be used.
* Install @ctrl/ngx-emoji-mart according to the angular version of your project @ctrl/ngx-emoji-mart
* Add these styles to your angular.json
* Wrap all the selectors in a div with class=responsive as shown in the next step

<Tabs>
  <Tab title="JavaScript">
    ```js theme={null}
    "styles": [
      "node_modules/@ctrl/ngx-emoji-mart/picker.css",
      "src/cometchat-pro-angular-ui-kit/CometChatWorkspace/src/css/styles.scss"
    ]
    ```
  </Tab>
</Tabs>

### Launch CometChat

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

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/fxK75AS6FzDL1Oqo/images/bb68b7ee-1623200230-fcc7e751c1f740c4a693bfdb14354be8.gif?s=145e4b270afdb9d0fba9d0cdc7955040" width="800" height="375" data-path="images/bb68b7ee-1623200230-fcc7e751c1f740c4a693bfdb14354be8.gif" />
</Frame>

### Usage

<Tabs>
  <Tab title="Angular">
    ```js theme={null}
    import { CometChatUI } from "../components/CometChatUI/CometChat-Ui/cometchat-ui.module";

    #Use this selector in your html file

    <div class="responsive">
      <CometChatUI></CometChatUI>
    </div>
    ```
  </Tab>
</Tabs>

## See our Angular Chat sample app

Visit our [Angular chat sample app](https://github.com/cometchat-pro/javascript-angular-chat-app) repo to see a UI with all the Angular chat components in action.