Angular Chat App Tutorial
Build a fully functioning chat user experience using Stream's Angular SDK library. By the end of this tutorial, you will have a chat app with support for rich messages, reactions, file uploads and more.
We are also going to show how easy it is to make customizations to the Angular Chat components that ship with this library and their styling.


Set Up Your Angular Environment
Confused about "Set Up Your Angular Environment"?
Let us know how we can improve our documentation:
The easiest way to build a Stream Chat Angular application from this tutorial is to create a new project using Angular CLI. Angular CLI builds an Angular boilerplate application that you can run locally with just a few simple commands.
Before you start: Make sure you've installed the most recent version of Angular CLI globally.
Create a new application with Angular CLI:
Note You can use other style language if you wish.
Install the necessary dependencies:
Run the following command if you are using Angular 16 or Angular 15:
Run the following command if you are using Angular 14:
Run the following command if you are using Angular 13:
Run this command if you are using Angular 12:
Create a WhatsApp or Facebook Messenger Style Chat App
Confused about "Create a WhatsApp or Facebook Messenger Style Chat App"?
Let us know how we can improve our documentation:
Stream's Angular Chat messaging SDK component library includes everything you need to build a fully functioning chat experience, supporting rich messages, reactions, image uploads, and more. This library was designed to enable you to get an application up and running quickly and efficiently while supporting customization for complex use cases.
We’ve included a few Stream Angular Chat examples to show you what’s possible:
- Basic chat components cxample
- Customizable UI components example
Build a Basic Chat App with Stream’s Core Angular Components
Confused about "Build a Basic Chat App with Stream’s Core Angular Components"?
Let us know how we can improve our documentation:
In the sample below, you’ll find the following basic chat components of the Angular library:
- ChannelList
- Channel
- ChannelHeader
- MessageInput
- MessageList
- Thread
To get started:
- Import the modules
Replace the content of your AppModule
with the following code:
This will import the TranslateModule
and the StreamChatModule
.
If you already use ngx-translate in your application, follow our translation guide to set up translation.
In an effort to keep our bundle size small in the long run our SDK uses an architecture where integrators can decide to opt-out of certain costly (in terms of bundle size) features, this decision happens at module import, in the above example we chose what type of textarea component we want to use. You can find more information about this topic in our opt-in architecture guide.
- Init the chat application
Replace the content of your app.component.ts
with the following code:
First, we connect a user to the chat client. Further information about connecting users is available in our platform documentation.
Next, we create a channel (if doesn't exist) to test with. You can read more about channel creation in our platform documentation.
Lastly, we provide a filter condition for loading channels. If you want to know more about filtering channels, our platform documentation got you covered.
We also set up the translation for the application. If you want to customize it, check out our translation guide.
- Create the chat UI
Replace the content of the app.component.html
with the following code:
- Import CSS
Add the following code to your root stylesheet (styles.scss
if you are using SCSS):
Important note If you are using CSS stylesheets, you should add the following import instead:
The SDK lets you create your own responsive layout, the code above contains a minimal setup where the channel list is displayed next to the channel component.
- Modify
tsconfig.json
Add the following option to the compilerOptions
in tsconfig.json
file:
We need to enable synthetic default imports becuase the stream-chat
library uses them.
- Start the application
Run the following command:
Once you have the app running, you’ll notice the following out-of-the-box features:
- User online presence
- Message status indicators (sending, received)
- User role configuration
- Message read indicators
- Message reactions
- URL previews (send a link to see it in action, for example, https://getstream.io/)
- GIFs (type
/giphy
in the message input) - Threads
- File uploads and previews
- AI-powered spam and profanity moderation
Creating Your Own UI Components
If the built-in theming capabilities are not enough for you, you can create your own custom components.
In the below example, you’ll create custom ChannelPreview
and Message
components.
- Create the
Message
component
Run the following command:
- Implement the
Message
component
Replace the content of the message.component.ts
with the following code:
- Use the custom message component
Provide the customMessageTemplate
to the CustomTemplatesService
:
In the HTML of your AppComponent
:
In the component class of your AppComponent
- Create the
ChannelPreview
component
Run the following command:
- Implement the
ChannelPreview
component
Replace the content of the channel-preview.component.ts
with the following code:
- Use the custom channel preview component
Provide the customChannelPreviewtemplate
to the CustomTemplatesService
:
In the HTML of your AppComponent
In the component class of your AppComponent
References
To learn more about the Angular SDK, check our SDK documentation and guides:
Final Thoughts
In this chat app tutorial we built a fully functioning Angular messaging app with our Angular SDK component library. We also showed how easy it is to customize the behavior and the style of the Angular chat app components with minimal code changes.
Both the chat SDK for Angular and the API have plenty more features available to support more advanced use-cases such as push notifications, content moderation, rich messages and more. Please check out our Android tutorial too. If you want some inspiration for your app, download our free chat interface UI kit.
Give us Feedback!
Any requests? Use the form below to connect directly with our dev team and tell us about your experience working with the Angular SDK:
We’ve been going at lightspeed to build more communication functionality into Kiddom. The only way to achieve this in four months was to do a chat integration with Stream because we needed to do it reliably and at scale.
Nick Chen
Head of Product, Kiddom