You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 7-8.RSVP
Sign inDemoInstall


Package Overview
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies



[![Build status](]( [![Coverage](](

Version published



Get Started | Get Help | Get Involved

Build status Coverage maintained - yes contributions - welcome Made with TypeScript Made with Node.js Made with Node.js

view - Documentation

This library provides an out-of-the-box usable XMPP chat component. It is customizable and offers an API to integrate it with your application. This library provides an out-of-the-box usable XMPP chat component. It is customizable and offers an API to integrate it with your application.


  • connect to XMPP servers via websocket
  • send and receive messages
  • load messages from message history (XEP-0313)
  • use the server side buddy list or use your own data source for that, API methods for adding / removing buddies available
  • supports multi-user chat


Have a look at our demo (valid XMPP credentials required)

  • 🌋 build in XMPP server support
    • send and receive messages, load messages from message history (XEP-0313), supports multi user chat
  • 🔥 fully featured angular chat components
  • 💉 open for injection
    • use the server side buddy list or use your own data source for that, API methods for adding / removing buddies available
    • replace the chat service with an own interface implementations to change the chat server

Table of Contents

  • Get Started
    • Compatibility
    • Installation and usage
  • Get Help
    • Documentation
    • FAQ
  • Get Involved
    • Development
    • Build the plugin
    • Run the plugin tests
    • Releasing

Get Started


  • Angular 14 (ngx-chat 0.14.x)
  • Angular 13 (ngx-chat 0.13.x)
  • Angular 12 (ngx-chat 0.12.x)
  • Angular 11 (ngx-chat 0.11.x)
  • Angular 10 (ngx-chat 0.10.x)
  • Angular 9 (ngx-chat 0.9.x)
  • Angular 8 (ngx-chat 0.4.x)
  • Angular 6 (ngx-chat 0.3.x)
  • requires node >= 16.16 && npm >= 8.11 for build

Installation and usage

These instructions require Angular 12.

First install ngx-chat and its dependencies via npm:

npm install --save @pazznetwork/ngx-chat @xmpp/client@~0.9.2 @angular/cdk@~14.0.5

After that, import ngx-chat in your root module:

    imports: [
        BrowserAnimationsModule, // alternatively NoopAnimationsModule 

Add the ngx-chat-component at the end of your root component template:


You are now ready to go. You will not see anything until you log in. Log in via ngx-chat wherever you want (e.g. in a component or a service) by injecting ChatService and calling login:

constructor(@Inject(CHAT_SERVICE_TOKEN) chatService: ChatService) {
        domain: 'ngx-chat.example',
        service: 'wss://ngx-chat.example:5280/websocket',
        password: 'password',
        username: 'someuser',

Add the following to polyfills.ts:

(window as any).global = window;

Optional: body padding when roster list is expanded

Add css styling like the following to your main styles.css if you want to resize your main content when the roster is expanded.

body {
    transition-property: padding-right;
    transition-duration: 0.4s;
    padding-right: 0;

body.has-roster {
    padding-right: 14em;

Get Help


Below you will find some instructions to getting started. Have a look at the wiki for more FAQ's and abstract documentation.

For a api, architecture and code overview checkout our ** compo**doc documentation.


Q: Which browsers are supported?
A: It is tested in Chrome, Safari and Firefox.

Q: Does ngx-chat work with self-signed certificates?
A: Yes, if the following criteria are met:

  • the certificate has to be trusted by the browser you are using. Chrome uses the operating system trust store for certificates while Firefox has a custom implementation.
  • the common name (CN) matches the uri of the service you are connecting to

Q: Can ngx-chat be used without the UI?
A: Yes. Inject the chat service via @Inject(CHAT_SERVICE_TOKEN) public chatService: ChatService, login via logIn and start sending messages via the sendMessage method.

Q: My question is not answered
A: No problem, feel free to raise an issue.

Get Involved


WARNING Pay attention to your imports in the testing app: '@pazznetwork/ngx-chat' instead of '../../../projects/pazznetwork/ngx-chat/src/lib/services/adapters/xmpp/plugins/multi-user-chat.plugin'

Pull requests are welcome!

The source code for ngx-chat can be found in the projects/pazznetwork/ngx-chat folder. The demo application is in the src folder in the project root.

# clone this repository
git clone
cd ngx-chat

# install dependencies
npm install

# build the library continuously
ng build @pazznetwork/ngx-chat --watch

# (in another terminal) build the sample app continuously
# will run the demo application on
# http://localhost:4200
ng serve

Build the plugin

npm run build-lib

Test the integration of your project with the plugin

$fileOutDirPath is your npm run build out-dir path

npm install $fileOutDirPath

Run the plugin tests

npm run test:once


For clean and standardised commit messages we use commit lint, for the format see:


npm run build-lib is necessary because otherwise creates a package with ngcc and throws on publish the following error:
trying to publish a package that has been compiled by ngcc

# increment version number in projects/pazznetwork/ngx-chat/package.json
VERSION=0.14.13 # change accordingly
npm run changelog
git add .
git commit -m "docs: release $VERSION"
git tag v$VERSION
git push origin master --tags



Package last updated on 20 Jul 2023

Did you know?


Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.


Related posts

SocketSocket SOC 2 Logo


  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog


Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc