ChatList Module Name: ChatListModule
Module Name: ChatListModule
The ChatList component is used to create/handle an chat conversation.
Showcase
Aim Brad Pitt
Online
Offline
search
Julia RobertsActress
Angelina JolieActress
<app-chat2 (readMessage)="onReadOne($event)"
(selectContact)="onSelectContactOne($event)"
(send)="onSendMessage($event)"
[user]="userONE"
[contacts]="contacts">
</app-chat2>
Aim Angelina Jolie
Online
Offline
search
Brad PittActor
Julia RobertsActress
<app-chat3 (readMessage)="onReadTwo($event)"
(selectContact)="onSelectContactTwo($event)"
(send)="onSendMessage($event)"
[user]="userTWO"
[contacts]="contacts">
</app-chat3>
Properties
Name | Type | Default | Description | Options |
---|---|---|---|---|
chatStatus | ChatStatus | {
BUSY: '#ffc019',
ONLINE: '#66cc99',
OFFLINE: '#ff3100'
}; | Object of chat status | Object<ChatStatus> |
color | string | basic | Changes the default color of the button. | basic | primary | success | information | warning | danger | light | dark |
contacts | ChatContact[] | null | List of contacts of chat | ChatContact[] |
id | string | tl-chatlist-NUMBER-OF-CHATS | ID of chat | string |
loadingMessages | boolean | false | Control loading spin | true | false |
maxHeight | string | 450px | The max height of chatlist container | px | % | em |
partner | ChatContact | null | Object of ChatContact, the partner of conversation | ChatContact |
user | ChatContact | null | Object of ChatContact, the user owner of conversation | ChatContact |
width | string | 400px | The width of chat container | px | % | em |
Events
Name | Parameters | Description |
---|---|---|
changeStatus | user : User that chat change status status : The new status | Event dispatched when user change status |
readMessage | ...message : Message Object of ChatMessage type | Event dispatched when chat should read a message |
selectContact | ...contact : The contact selected/clicked unreadMessages : The non read messages by user of that contact selected | Event dispatched when user select a partner to talk/type |
sendMessage | ...message : Message Object of ChatMessage type | Event dispatched when user send a message |
Methods
ChatService
Name | Parameters | Description |
---|---|---|
appendMessage | message : The Message Object of Type ChatMessage user : User of chat chatId : ID of chat | Method used append messages on chat |
deleteChat | Remove chat and all messages of it | |
getAllMessages | chatId : ID of chat | Return all messages of chat |
loadMessages | message : The Message Object of Type ChatMessage chatId : ID of chat | Method used to a list of messages |
readAll | chatId : ID of chat | Method used to read all messages |
readMessages | messages : Array of Messages of Type ChatMessage user : User of chat chatId : ID of chat | Method used read messages of chat |
setStatus | status : Status of contact chatId? : ID of chat | Method used to set status of chat owner |
Interfaces
ChatContact
Name | Type | Description |
---|---|---|
description | string | The description shown bellow the NickName |
gravatar? | string | The Gravatar email |
id | string | number | The ID of contact |
image? | string | The image url |
name | string | The Name of Contact |
status | Status | string | The status of contact |
ChatMessage
Name | Type | Description |
---|---|---|
from | ChatContact | The owner message, the sender. |
id | string | The ID of message |
message | string | The message itself. |
time | Date | The time of message, was send most of the times generated by the server. |
to | ChatContact | The recipient of message |
viewed | boolean | A property to control if the message was viewed or not |
ChatStatus
Name | Type | Description |
---|---|---|
BUSY | string | Hex color of busy status |
OFFLINE | string | Hex color of offline status |
ONLINE | string | Hex color of online status |