NgxChat
Chat UI Component for Angular Applications
Live Demo
Source Code
Installation
Use the package manager npm to install the chat.
npm install ngx-wachat --save
Usage
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NgxWachatModule} from 'ngx-wachat';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
NgxWachatModule.forRoot()
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
In Your HMTL
<ngx-wachat [contacts]="contacts" [origin]="from" (sendMessage)="onSendMessage($event)"></ngx-wachat>
Properties
| Property |
Description |
Type |
Default |
contacts |
Array of contacts |
ChatContact[] |
[] |
origin |
User origin of the message |
ChatContact |
null |
placeholder |
Placeholder text of field that send's message |
string |
Say Hi |
height |
Height of chat window |
string |
400px |
width |
Width of chat window |
string |
350px |
color |
Header color of chat window |
string |
#629ce4 |
emptyListDescription |
Text of label when list of contacts is empty |
string |
No Contacts Found |
Events
| Event |
Description |
value |
sendMessage |
Emitted when user press enter on field to send message |
ChatMessage |
Methods ChatService
| Method |
Description |
Parameter |
loadMessages |
Method that (first) load messages to chat |
ChatMessage[] |
sendMessage |
Method that append message received from server |
ChatMessage |
| Property |
Description |
Type |
id |
Id of chat contact |
string or number |
name |
Name of chat user |
string |
description |
Sub text shown just below the name of chat user |
string |
status |
Status of chat user on chat |
ChatStatus |
avatar |
Path of avatar image |
string |
Interface ChatMessage
| Property |
Description |
Type |
origin |
User chat, origin of the message |
ChatContact |
destination |
User chat, destination of the message |
ChatContact |
message |
The string message |
string |
date |
Date of message ( generated from server or not) |
Date |
License
MIT
crakdelpol