# Overview

Building on top of the Stream Chat API, the Stream Chat Angular component library includes everything you need to build feature-rich and high-functioning chat user experiences out of the box.
The library includes an extensive set of performant and customizable Angular components which allow you to get started quickly with little to no plumbing required.
Use cases include team and social messaging and customer support. The library supports:

- Rich media messages
- Reactions
- Image and file uploads
- Read state
- Channel and message lists
- Threads

## Start here

- [Angular tutorial](https://getstream.io/chat/sdk/angular/tutorial/): Build your first Stream Angular chat application.
- [Theming](https://getstream.io/chat/docs/sdk/angular/theming/themingv2/): Customize the look and feel of the built-in components.
- [JavaScript client docs](https://getstream.io/chat/docs/javascript/): The stream-chat client API the library is built on.

## Build with Stream CLI and Agent Skills

The [Stream CLI](https://getstream.io/cli/docs/) and [Agent Skills](https://getstream.io/agent-skills/docs/) give AI coding agents the tools and knowledge to work with Stream. There is no dedicated skill pack for Angular yet, but the default skills still help with live documentation and CLI-driven API work.

Install the CLI and the default skills:

```bash
curl -fsSL https://getstream.io/cli.sh | bash
getstream skills
```

Once installed, invoke `/stream` from your agent. It routes documentation lookups and API operations for you.

Stream Agent Skills can also be installed from [skills.sh](https://www.skills.sh/getstream/agent-skills/stream).

## Architecture

The library contains a set of components that contain all of the necessary features to build a performant chat UI. However, it is also possible to provide your own custom components instead of the built-in ones.

If you want to, you can build your own chat UI from scratch but still take advantage of the library by using our services.

```mermaid
flowchart LR
  app[Your app] --> components[Chat components]
  app -. custom UI .-> services[Services]
  components --> services
  services --> client[stream-chat client]
  client <--> api[Stream API]
```

Check out the instructions below for adding the library to your Angular project.

## Installation

We recommend using the component library through a package manager. Stream Chat Angular is based on top of Stream's [JavaScript Client](https://getstream.io/chat/docs/javascript/).

### Install with npm

Angular versions 17-22 are supported

```shell label="Angular 22"
# Not all libraries support Angular 22 yet
npm install stream-chat-angular stream-chat @ngx-translate/core ngx-float-ui@21 --legacy-peer-deps
```

```shell label="Angular 21"
npm install stream-chat-angular stream-chat @ngx-translate/core ngx-float-ui@21
```

```shell label="Angular 20"
npm install stream-chat-angular stream-chat @ngx-translate/core ngx-float-ui@20
```

```shell label="Angular 19"
npm install stream-chat-angular stream-chat @ngx-translate/core ngx-float-ui@19
```

```shell label="Angular 18"
npm install stream-chat-angular stream-chat @ngx-translate/core ngx-float-ui@18
```

```shell label="Angular 17"
npm install stream-chat-angular stream-chat @ngx-translate/core ngx-float-ui@17
```

> Supported Node versions: 18+

## What's next

- [Users and tokens](https://getstream.io/chat/docs/sdk/angular/concepts/users-and-tokens/): Connect users and authenticate them with tokens.
- [Customization](https://getstream.io/chat/docs/sdk/angular/concepts/customization/): Swap the built-in components for your own.
- [Client state](https://getstream.io/chat/docs/sdk/angular/concepts/client-state/): How the library manages and exposes chat state.

## FAQ

**Can I build a mobile app with it?**

Yes, with Ionic. See the [Ionic guide](https://getstream.io/chat/docs/sdk/angular/code-examples/ionic-guide/).

**Are push notifications supported?**

Yes. See the [push notifications guide](https://getstream.io/chat/docs/sdk/angular/guides/push-notifications/).

**How do I upgrade from v6?**

Follow the [upgrade guide](https://getstream.io/chat/docs/sdk/angular/basics/upgrade-v6/). v7 drops Angular 15 and 16.

**Does chat include moderation?**

Yes. AI engines screen messages and users can flag content into a [dashboard](https://getstream.io/signin/?product=chat) review queue. See [moderation for chat](https://getstream.io/chat/docs/javascript/moderation/).

---

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/angular/](https://getstream.io/chat/docs/sdk/angular/).