ChatList Module Name: ChatListModule

Module Name: ChatListModule

The ChatList component is used to create/handle an chat conversation.

Showcase
Aim Brad Pitt
Online
Offline
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
Brad PittActor
2
Julia RobertsActress
<app-chat3 (readMessage)="onReadTwo($event)"
           (selectContact)="onSelectContactTwo($event)"
           (send)="onSendMessage($event)"
           [user]="userTWO"
           [contacts]="contacts">
</app-chat3>
Properties
NameTypeDefaultDescriptionOptions
chatStatusChatStatus{ BUSY: '#ffc019', ONLINE: '#66cc99', OFFLINE: '#ff3100' };Object of chat status Object<ChatStatus>
colorstringbasicChanges the default color of the button. basic | primary | success | information | warning | danger | light | dark
contactsChatContact[]nullList of contacts of chat ChatContact[]
idstringtl-chatlist-NUMBER-OF-CHATSID of chat string
loadingMessagesbooleanfalseControl loading spin true | false
maxHeightstring450pxThe max height of chatlist container px | % | em
partnerChatContactnullObject of ChatContact, the partner of conversation ChatContact
userChatContactnullObject of ChatContact, the user owner of conversation ChatContact
widthstring400pxThe width of chat container px | % | em
Events
NameParametersDescription
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
NameParametersDescription
appendMessage
message : The Message Object of Type ChatMessage
user : User of chat
chatId : ID of chat
Method used append messages on chat
deleteChatRemove 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
NameTypeDescription
descriptionstringThe description shown bellow the NickName
gravatar?stringThe Gravatar email
idstring | numberThe ID of contact
image?stringThe image url
namestringThe Name of Contact
statusStatus | stringThe status of contact
ChatMessage
NameTypeDescription
fromChatContactThe owner message, the sender.
idstringThe ID of message
messagestringThe message itself.
timeDateThe time of message, was send most of the times generated by the server.
toChatContactThe recipient of message
viewedbooleanA property to control if the message was viewed or not
ChatStatus
NameTypeDescription
BUSYstringHex color of busy status
OFFLINEstringHex color of offline status
ONLINEstringHex color of online status