npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

stream-chat-angular

v5.8.1

Published

Angular components to create chat conversations or livestream style chat

Downloads

21,822

Readme

Official Angular SDK for Stream Chat

The official Angular components for Stream Chat, a service for building chat applications.

tests and release workflow

Quick Links

With our component library, you can build a variety of chat use cases, including:

  • In-game chat like Overwatch or Fortnite
  • Team-style chat like Slack
  • Messaging-style chat like WhatsApp or Facebook's Messenger
  • Customer support chat like Drift or Intercom

Angular Chat Tutorial

The best way to get started is to follow the Angular Chat Tutorial. It shows you how to use this SDK to build a fully functional chat application and includes common customizations.

Free for Makers

Stream is free for most side and hobby projects. To qualify, your project/company must have no more than 5 team members and earn less than $10k in monthly revenue. For complete pricing and details visit our Chat Pricing Page.

Docs

The docs provide a brief description about the components and services in the library.

The Angular library is created using the stream-chat-js library. For the most common use cases our services should give a nice abstraction over this library, however you might need it for more advanced customization, the documentation is on our website.

Contributing

We welcome code changes that improve this library or fix a problem. Please make sure to follow all best practices and add tests, if applicable, before submitting a pull request on GitHub. We are pleased to merge your code into the official repository if it meets a need. Make sure to sign our Contributor License Agreement (CLA) first. See our license file for more details.

We are hiring.

We recently closed a $38 million Series B funding round and are actively growing. Our APIs are used by more than a billion end-users, and by working at Stream, you have the chance to make a huge impact on a team of very strong engineers.

Check out our current openings and apply via Stream's website.

Installation

Install with NPM

Run the following command if you are using Angular 13:

npm install stream-chat-angular stream-chat @ngx-translate/core

Run this command if you are using Angular 12:

npm install stream-chat-angular stream-chat@5 @ngx-translate/core --legacy-peer-deps

Sample App

This repository includes a sample app to test our library.

To test the app:

Create a file named .env in the root directory with the following content:

STREAM_API_KEY=<Your API key>
STREAM_USER_ID=<Your user ID>
STREAM_USER_TOKEN=<Your user token>

Run npm start and navigate to http://localhost:4200/.

Customization examples

This repository includes a sample app that showcases how you can provide your own template for different components within the SDK:

To run the app:

Create a file named .env in the root directory with the following content:

STREAM_API_KEY=<Your API key>
STREAM_USER_ID=<Your user ID>
STREAM_USER_TOKEN=<Your user token>

Run npm start:customizations-example and navigate to http://localhost:4200/.

Local development

Run npm install in the root of the project. You can use the npm run start:dev command to start the SampleApp with automatic reloading.

A note about the documentation:

  • Documentations for Angular services are generated from doc comments in the source files (not under source control)
  • Documentations for inputs and outputs of Angular components are generated from doc comments in the source files (not under source control)
  • Everything else in the documentation is written in mdx files located in the docusaurus folder