Ngx-wachat NPM

NgxChat

Chat UI Component for Angular Applications

npm.io

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

Interface `ChatContact`

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`