Skip to content

Latest commit

 

History

History
93 lines (72 loc) · 2.74 KB

README.md

File metadata and controls

93 lines (72 loc) · 2.74 KB

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

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

For Google

angular ui components angular 2 components, angular 4 components, angular 8 components ng2, ng components ng-components ng2-components angular2 components chat-ui, chat component, angular chat

License

MIT