Facebook/linkedin lookalike chat module for Angular applications

by

Do you want to add facebook like chat box on your website If yes then In this post I am going to share A simple Facebook/Linkedin lookalike chat module for Angular applications.
Facebook-Linkedin-Style-Chat-Component-For-Angular

Installation

Installing component via NPM

npm install ng-chat

Import the NgChatModule on your AppModule (EG: app.module.ts):

import { NgChatModule } from 'ng-chat';
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    NgChatModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Add the component directive in your AppComponent template:

<ng-chat [adapter]="adapter" [userId]="userId"></ng-chat>




And in your app.component.ts:

import { Component } from '@angular/core';
import { ChatAdapter } from 'ng-chat';
import { MyAdapter } from 'my-adapter';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  userId = 999;
 
  public adapter: ChatAdapter = new MyAdapter();
}

Required Settings

  • [adapter]{string}: This will point to your adapter implementation (‘MyAdapter’ in the example above).
  • [userId]{any}: The unique id of the user that will be using the chat instance.




Additional Settings

  • [title]{string}: The title to be displayed on the friends list. Default is “Friends”.
  • [isCollapsed]{boolean}: If set to true the friends list will be rendered as collapsed by default. Default is false.
  • [pollFriendsList]{boolean}: If set to true the module will do a long poll on the “adapter.listFriends” method to keep the friends list updated. Default is false.
  • [pollingInterval]{number}: Configures the long poll interval in milliseconds. Default is 5000.
  • [searchEnabled]{boolean}: Enables the search bar on the friends list. Default is true.
  • [historyEnabled]{boolean}: Defines whether the component should call the “getMessageHistory” from the chat-adapter. Default is true.
  • [historyPageSize]{number}: Set the page size for each request if you are using the paged history chat adapter (Beta). Default is 10.
  • [emojisEnabled]{boolean}: Enables emoji parsing on the messages. Default is true.
  • [linkfyEnabled]{boolean}: Transforms links within the messages to valid HTML links. Default is true.
  • [audioEnabled]{boolean}: Enables audio notifications on received messages. Default is true.
  • [audioSource]{string}: WAV source of the audio notification. Default is a RAW github WAV content from ng-chat repository.
  • [persistWindowsState]{boolean}: Saves the state of current open windows on the local storage. Default is true.
  • [browserNotificationsEnabled]{boolean}: Enables browser notifications on received messages. Default is true.
  • [browserNotificationIconSource]{string}: Source URL of the icon displayed on the browser notification. Default is a RAW github PNG content from ng-chat repository.
  • [maximizeWindowOnNewMessage]{boolean}: If set to false new chat windows will render as collapsed when receiving new messages. Default is true.
  • [hideFriendsList]{boolean}: Hides the friends list. Chat windows can still be opened, closed and toggled by using IChatController. Default is false.
  • [hideFriendsListOnUnsupportedViewport]{boolean}: Hides the friends list if there isn’t enough space for at least one chat window on the current viewport. Default is true.
  • [fileUploadUrl]{string}: Defines a valid CORS enabled URL that can process a request form file and return a FileMessage for the destinatary user.
  • [theme]{ng-chat/core/theme.enum:Theme}: Defines the styling theme. There is a light (default) and a dark theme available. You can also supply this as a string.
  • [customTheme]{string}: Source URL of the stylesheet asset to use for custom CSS styles. Works with assets relative to the project using ng-chat.




Localization Settings

  • [messagePlaceholder]{string}: The placeholder that is displayed in the text input on each chat window. Default is “Type a message”.
  • [searchPlaceholder]{string}: The placeholder that is displayed in the search input on the friends list. Default is “Search”.
  • [localization]{Localization}: Contract defining all text that is rendered by this component. Supply your own object for full text localization/customization. Supplying this setting will override all other localization settings.

Events

  • (onUserClicked){User}: Event emitted every time a user is clicked on the chat window and a new chat window is opened.
  • (onUserChatOpened){User}: Event emitted every time a chat window is opened, regardless if it was due to a user click on the friends list or via new message received.
  • (onUserChatClosed){User}: Event emitted every time a chat window is closed.
  • (onMessagesSeen){Message[]}: Event emitted every time a chunk of unread messages are seen by a user.

See live demo and download source code.

DEMO | DOWNLOAD

This awesome plugin is developed by rpaschoal. Visit their official github repository for more information and follow for future updates.


Published by Rohit