https://github.com/RumbleTalk/ngx-rumbletalk
RumbleTalk group chat Angular integration. Integrate a high performance chat service in two minutes to any site. live event. platform. app.
https://github.com/RumbleTalk/ngx-rumbletalk
angularchat chat chatbox chatroom chatservices groupchat liveevent polls
Last synced: 1 day ago
JSON representation
RumbleTalk group chat Angular integration. Integrate a high performance chat service in two minutes to any site. live event. platform. app.
- Host: GitHub
- URL: https://github.com/RumbleTalk/ngx-rumbletalk
- Owner: RumbleTalk
- Created: 2019-08-08T18:34:16.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2025-11-08T17:22:40.000Z (10 days ago)
- Last Synced: 2025-11-08T19:12:12.988Z (10 days ago)
- Topics: angularchat, chat, chatbox, chatroom, chatservices, groupchat, liveevent, polls
- Language: TypeScript
- Homepage: https://rumbletalk.com
- Size: 1.53 MB
- Stars: 2
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- fucking-awesome-angular - ngx-rumbletalk - An Angular library for 🌎 [Rumbletalk](rumbletalk.com/) group chats. (Third Party Components / Media)
- awesome-angular - ngx-rumbletalk - An Angular library for [Rumbletalk](https://rumbletalk.com/) group chats. (Third Party Components / Media)
README
# NgxRumbletalk
An angular library for Rumbletalk group chats. Your platform for creating engaging messaging
chat rooms for online events, web-site, platforms ,or apps.
## Features
- Angular compatibility
- CSS Customization
- Polls
- Create multiple rooms
- Video and audio calls
- Approve message mode (Q&A / Moderated Chat)
- Backend agnostic
- Voice and audio messages
- Images, videos, files & emojis
- Private messages
- Text formatting - bold, italic, strikethrough, underline
- Online / offline users status
- Flexible options
- Different designs / themes
- Embed or floating chat
- Mute all
## Installation
Using npm:
`npm i ngx-rumbletalk`
## Supported versions:
| Angular Version | Supported Version |
| ---------------------- | ----------------- |
| 15.x.x+ | 5.x.x |
| 14.x.x | 4.x.x |
| 13.x.x (Ivy) | 3.x.x |
| <=12.x.x (View Engine) | 2.x.x |
## Setup
**Import** `NgxRumbletalkModule` to your application's module
```typescript
import { NgxRumbletalkModule } from 'ngx-rumbletalk';
@NgModule({
...
imports: [ NgxRumbletalkModule ],
...
})
export class AppModule { }
```
## Component usage
Use this in any of your `html` file where you would like to place the chat
### Basic use
```html
```
### Floating
```html
```
Option
Type
Default
Description
hash
string
The hash string which defines the chat to be loaded
width
number
700 if floating is true
Size of the width of the chat in pixels
height
number
500 if floating is true
Size of the height of the chat in pixels
floating
boolean
false
Displays the chat in a floating manner or else it is fixed
side
string
right
If floating is true, sets which side of the window will the floating chat be displayed, can only be either 'left' or 'right'
image
string
default image
If floating is true, sets the image used for the floating chat
counter
string
14:23
If floating is true, top:left coordinates of the counter/number of users in the chat
## Service usage
These are the available methods you can use in the chat by importing the `NgxRumbleTalkService` file
> Note: Don't forget to import the service and interfaces
> `import { LoginData, LogoutData, LogoutCbData, NgxRumbletalkService } from 'ngx-rumbletalk';`
> in the file you are working on and inject it in your class constructor
> `constructor(private rumbletalkService: NgxRumbletalkService) {}`
### Methods
#### login(data: LoginData): Promise
```typescript
this.rumbletalkService.login(data)
.then(response => console.log(response))
.catch(error => console.log(error));
```
Used to log in to your chat
#### logout(data: LogoutData): void
```typescript
this.rumbletalkService.logout(data);
```
Used to log out from your chat
#### logoutCB(data: LogoutCbData): void
```typescript
this.rumbletalkService.logoutCB(data);
```
Used to log out from your chat but with a callback that you can use for whatever purpose
#### openPrivateChat(data: OpenPrivateChatData): void
```javascript
this.ref.current.openPrivateChat({
hash: hash,
username: username,
});
```
Used to open the private chat
## Interface
### LoginData
```typescript
export interface LoginData {
hash: string;
username: string;
password?: string;
image?: string;
forceLogin?: boolean;
}
```
### LogoutData
```typescript
export interface LogoutData {
hash: string;
userId?: string;
username?: string;
}
```
### LogoutCbData
```typescript
export interface LogoutCbData {
hash: string;
callback: any;
}
```
### OpenPrivateChatData
```typescript
export interface OpenPrivateChatData {
hash: string;
userId?: string;
username?: string;
}
```
