NgxChat
Chat UI Component for Angular Applications
Installation
Use the package manager npm to install the chat.
npm install ngx-wachat --save
Usage
;;; ;;
In Your HMTL
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 |
ChatService
Methods Method | Description | Parameter |
---|---|---|
loadMessages |
Method that (first) load messages to chat | ChatMessage[] |
sendMessage |
Method that append message received from server | ChatMessage |
ChatContact
Interface 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 |
ChatMessage
Interface 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 |