Introduction

The code library allows implementing messaging system. If you application requires some conversations to store as chat, this library is helpful.

Installing Library

Issue following to install this library

$ npm i apaar-message

Adding to template

Add following snippet in your template.

<apaar-msg-lib 
	(onsend)="receivedComments($event)" 
	[LoggedInuserId]="userId" 
	[datasource]="Data"> 
</apaar-msg-lib>

Here Data in [datasource]="Data" is you source of data from server that would list messages below textarea of chat component. The format for the same is:

[
	{
		"id": "63ee122575c423374b41078b", 
		"text": "hello", 
		"createTimestamp": "2023-02-16T10:57:11.474+00:00", 
		"createdBy": "789410", 
		"userName": "John Doe"
	},
	{
		"id": "63ee122575c423374b41078b", 
		"text": "hello", 
		"createTimestamp": "2023-02-16T10:57:11.474+00:00", 
		"createdBy": "789410", 
		"userName": "John Doe"
	},
	{
		"id": "63ee122575c423374b41078b", 
		"text": "hello", 
		"createTimestamp": "2023-02-16T10:57:11.474+00:00", 
		"createdBy": "789410", 
		"userName": "John Doe"
	}
 ]

Here

• id: unique reference id in a collection.
• text: text message of chat
• createTimestamp: timestamp
• createdBy: an user who created this message. This value will be any of your unique id referring to user that created this chat text.
• userName: name of user who created this message. This is required for displaying in the message history.

Please note that the messages are positioned left and right. The right position message is message of an user who currently logged in your system. The message library needs input on the logged-in user id so that library can display message to right. The value userId in [LoggedInuserId]="userId" needs to be assigned in your component class so that internally the logged user's message can be displayed to right.

Till now we discussed who to display message and bind logged in user id for displaying messages to right. Rest of message would appear on left side.

Creating New Message

In template syntax, we haveonsend, which is event that gets triggered when send button beside textarea is invoked. You have to implement, event handler receivedComments($event) in your component, like below: <div>

receivedComments($event){
	//handle new chat data received
	//you may send to your server API and store it.
}

Once this function gets executed, you call all messages from server API and display them back to user. For this you need to override Data property we discussed before.

I hope this small documentation would help you implementing the same.

Thank you,